Contents.js 阻止页面加载 chrome 扩展答案

【问题标题】：Contents.js blocking page load chrome extensionContents.js 阻止页面加载 chrome 扩展
【发布时间】：2021-11-01 03:45:28
【问题描述】：

大家好，我正在构建一个扩展，但我有一个运行时很重的函数，它会阻塞页面的负载，我想知道是否可以仅在页面完全加载和交互后运行它在脚本中还是在manifest.json?

我目前将它放在 window.onload 中，但仍会阻止页面的交互性。

脚本：

async function getEAN() {
    var EANIndex;
    var body = document.body.innerText;

    if ((EANIndex = body.indexOf('EAN')) !== -1) {
        body = body.slice(EANIndex, EANIndex + 100);
        const regexExpression = RegExp(/([^EAN]*$)*\d{3}\d{4,6}\d{3,5}\d/gm);
        return body.match(regexExpression)[0]
    }
    return false
}

window.onload = function() {
    if (window.location.pathname &&
        location.hostname.indexOf(".google.com") !== -1) {
        console.log(getEAN());
    }
}

如果是的话，这是否可能，我该如何实现？

【问题讨论】：

代码很简单，所以问题出在你的正则表达式上，特别是不正确的([^EAN]*$)*。向我们展示您想要匹配的文本及其变体，我们将修复正则表达式。
文本是整个页面。我已经通过找到 EAN 的索引来删减它，并且正则表达式在单词 EAN 之后搜索了一系列数字。
这里是例子：regex101.com/r/jYlSAj/1@wOxxOm
我要求您显示要匹配的文本部分并定义匹配规则以修复正则表达式。没有它，我只能猜测 \n 代表一个真正的换行符，并且您想匹配 EAN 之后的数字，因此正则表达式将是 /(?<=EAN\s*)\d{11,15}/gm
是的，我基本上想在产品页面中找到 EAN，这样我就可以使用我的 API 进行一些处理。不幸的是，在 regex101 中对其进行了测试，但 EAN 部分不起作用。因此，为了进一步说明，我可以先使用 EAN，然后是一些 HTML 标签或 \n ...，然后是 EAN 数字，我希望在 EAN 之后立即包含 11 到 15 个数字的组合

标签： javascript html regex dom google-chrome-extension

【解决方案1】：

由于内容脚本本身很琐碎，问题是由正则表达式中的灾难性回溯引起的，特别是([^EAN]*$)*，它可以在任何地方匹配0个字符。

解决方案是使用后视条件：

/(?<=EAN\s*)\d{11,15}/gm

【讨论】：