jquery - 使用 declarativeContent 权限，使用 jQuery 内容更改后隐藏 pageAction

Question

我正在开发一个 Chrome 扩展程序，以便向其他人开发的网站添加功能。我无法控制他们的代码。

我的代码仅设计用于其网站的特定页面。由于内容敏感，我使用 chrome.declarativeContent API 来确保在安装扩展程序时不会生成任何可能会吓到我的潜在用户的权限警告。

我遇到的问题是网站作者 有时使用 jQuery 覆盖页面上的部分内容 使用 jQuery Mobile。此事件确实会更改 URL。 Chrome 扩展程序 API 未响应此更改，并保持 pageAction 图标显示且内容脚本处于事件状态。

结果是，每次我导航回与我的 PageStateMatcher 匹配的页面时，Chrome 都会将我的内容脚本的另一个实例添加到该页面。当用户单击我的 pageAction 图标时，脚本会多次触发，从而产生不需要的结果。

在 jQuery 更改内容后如何清除 pageAction 图标和内容脚本？

代码:

===背景.js===

var match_rules = {
    conditions: [
       new chrome.declarativeContent.PageStateMatcher({
           //find pages like 'https://*.example.com/*/reports/report.asp'
           pageUrl: { 
               hostSuffix: '.example.com', 
               pathSuffix: '/reports/report.asp', 
            schemes: ['https']
            }
       })
    ],
    //If found, display the Page Action icon registered in the manifest.json
    actions: [ new chrome.declarativeContent.ShowPageAction() ]
};

chrome.runtime.onInstalled.addListener(function(details) {
    chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
        chrome.declarativeContent.onPageChanged.addRules([match_rules]);
    });
});

// Called when the user clicks on the browser action.
chrome.pageAction.onClicked.addListener(function(tab) {
  chrome.tabs.executeScript(null, {file: 'content_script.js'},  function(result){
        chrome.tabs.sendMessage(tab.id, {action: 'go'}, 
            function(response){
                console.log(response);
        });
  });
});

=== content_script.js ===

if (window == top) {
  chrome.extension.onMessage.addListener(function(req, sender, sendMessage) {
    console.log("Got request");
    doStuff();
    sendMessage('Done!');
  });
}

=== list .json ===

{
    "name": "My Extension",
    "permissions": [
       "declarativeContent", "activeTab"
    ],
    "background": {
       "scripts": ["background.js"],
       "persistent": false
    },
    "page_action": {
       "default_icon": {
          "19": "images/logo_19.png",
          "38": "images/logo_38.png"
       },
       "default_title": "Do Something"
    },
    "manifest_version": 2
}

Answer 1

我找到了答案，而且比我想象的要简单。

declarativeContent.PageStateMatcher 不会触发通过更新 location.hash 来完成的对 pageURL 规则的更改。

当 DOM 被修改时，对 css 规则的更改会立即触发 PageStateMatcher。

就我而言，只有我感兴趣的页面有一个元素#report，因此将条件更改为:

       new chrome.declarativeContent.PageStateMatcher({
          pageUrl: { hostSuffix: '.example.com',  schemes: ['https'] },
          css: ["#report"]
       })

解决了我的问题。