如何仅更改带有弹出窗口的活动标签的 Chrome 扩展程序图标？

Archanfel 发表于 Dev

大恶魔

我正在制作一个简单的 chrome 扩展，可以检查当前活动选项卡的 HTML 标签。

单击扩展图标时，它显示 default popup page(popup.html)

它将根据结果更改扩展图标并在弹出页面上显示结果。

我正在使用chrome.browserAction.setIcon({path: imgSrc})代码来更改扩展程序的图标。

但问题是，此代码更改所有其他选项卡上的扩展图标。

我只想在单击扩展图标的当前活动选项卡上更改它。

我知道我应该获取当前选项卡 id 来更改当前活动选项卡的 ext 图标。

对于此代码 chrome.browserAction.setIcon({tabId: tab.id, path: imgSrc})

但不知道如何获取当前的活动标签 ID popup.js，而不是background.js

有人可以帮助我吗？

这是我的文件

manifest.json声明default_popup

{
    "name": "Tag Checker for ChromeExtension",
    "version": "1.0.0",
    "description": "Tag Checker for ChromeExtension",
    "manifest_version": 2,
    "permissions": [
        "activeTab",
        "storage"
    ],
    "browser_action": {
        "default_icon": {
            "16": "images/browserAction/best.png",
            "32": "images/browserAction/normal.png",
            "48": "images/browserAction/bad.png",
            "128": "images/browserAction/abnormal.png"
        },
        "default_popup": "popup.html"
    }
}

弹出窗口.html

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Tag Checker</title>
    <script src="/js/popup.js"></script>
</head>
<body>
    <span id="results"></span>
</body>
</html>

弹出窗口.js

chrome.tabs.executeScript({file: '/js/injection.js'});

注入.js

//checking tag codes will be implemented here

var imgSrc = 'images/browserAction/48.png';
chrome.browserAction.setIcon({path: imgSrc});

(function() {
  document.querySelector('#results').innerText = 'DONE';
})();

哇哦

内容脚本做不到。
将两行（imgSrc 和 setIcon）移动到 popup.js 并指定 tabId。

popup.js：

chrome.tabs.query({active: true, currentWindow: true}, ([tab]) => {
  chrome.browserAction.setIcon({tabId: tab.id, path: 'images/browserAction/48.png'});
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。