增量计数器Chrome扩展批次(Javascript)

Question

我几乎是所有编程语言的新手，所以不要对我期望太高:)

我正在尝试创建一个 Chrome 扩展程序来计算特定字符串 x 在网页上的使用次数。该数字分批显示在扩展程序图标的顶部（就像 AdBlock 显示页面上被阻止的广告数量一样）。

我的代码拼凑在一起，但它目前是这样工作的：

在 content.js 中，我创建了一个脚本来查找特定的字符串，并将其替换为完全相同的字符串。替换后，它将值 1 添加到变量计数器。

var elements = document.getElementsByTagName('*');
var counter = 0;

for (var i = 0; i < elements.length; i++) {
    var element = elements[i];

    for (var j = 0; j < element.childNodes.length; j++) {
        var node = element.childNodes[j];

        if (node.nodeType === 3) {
            var text = node.nodeValue;
            var replacedText = text.replace(/string/gi, 'string');

            if (replacedText !== text) {
                element.replaceChild(document.createTextNode(replacedText), node);
              counter += 1;
            }
        }
    }
}

然后在 background.js 我创建了批次：

chrome.browserAction.setBadgeBackgroundColor({ color: [255, 0, 0, 255] });
chrome.browserAction.setBadgeText({text: counter});

但这似乎不起作用。

几个问题：

如何在小批量中获取变量 'counter' 的值？
如何确保为每个新网页重新生成该值？

我为这个项目创建了一个小 GitHub repo，因此您可以访问所有文件。

Answer 1

1：使用chrome消息传递API将您的计数器值传递到后台页面，当您收到该值时，在后台使用计数器更新徽章值。见 https://developer.chrome.com/extensions/messaging

2：内容脚本在页面加载时总是 re-executed，因为 content.js 中的计数器变量未存储在内存中，因此您的计数器变量将始终在页面加载时重置。

解决方案

content.js

var elements = document.getElementsByTagName('*');
var counter = 0;

for (var i = 0; i < elements.length; i++) {
    var element = elements[i];

    for (var j = 0; j < element.childNodes.length; j++) {
        var node = element.childNodes[j];

        if (node.nodeType === 3) {
            var text = node.nodeValue;
            var replacedText = text.replace(/string/gi, 'string');

            if (replacedText !== text) {
                element.replaceChild(document.createTextNode(replacedText), node);
              counter += 1;
            }
        }
    }
}

chrome.runtime.sendMessage({counter: counter});

background.js

chrome.browserAction.setBadgeBackgroundColor({ color: [255, 0, 0, 255] });

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    chrome.browserAction.setBadgeText({text: `${request.counter}`});
});

增量计数器Chrome扩展批次(Javascript)

Incremental counter Chrome extension batch (Javascript)

javascript

google-chrome-extension

解决方案