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

Question

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

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

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

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

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

代码：

=== background.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!');
  });
}

=== manifest.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不会触发通过更新pageURL对location.hash规则所做的更改。

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

在我的情况下，只有我感兴趣的页面才有#report元素，因此将条件更改为：

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

解决了我的问题。