javascript - 当我移至另一个标签页时，如何停止我的Chrome扩展程序？

我已经在Google开发人员chrome site的Chrome扩展程序上完成了该教程
并试图创建自己的。基本上，我想做一个扩展，当单击浏览器操作时，使您能够单击页面上段落的任何句子并将其突出显示。当您移动到另一个选项卡时，必须再次单击它才能将其激活。问题是，不幸的是，当我移至另一个选项卡或导航至另一个站点时，它似乎并没有停止。如何停止？

这是我的manifest.json文件：

{
  "name": "Page highlight ",
  "description": "Make the current page red",
  "version": "2.0",
  "permissions": [
    "activeTab"
  ],
   "content_scripts": [
    {
    "matches": ["http://*/*"],
      "css": ["style.css"],
      "js": ["jquery-1.11.1.min.js", "myscript.js"]
    }
  ],
   "browser_action": {
    "default_title": "highlight sentence on click"
  },
  "manifest_version": 2
}

我添加了一个使用jQuery的jQuery文件和我的myscript.js文件，如下所示：

$(document).ready(function()
{
    $('p').each(function() {
        $(this).html($(this).text().split(/([\.\?!])(?= )/).map(
            function(v){return '<span class=sentence>'+v+'</span>'}
        ));
    });

   $('.sentence').click(function(){
    $(this).toggleClass("highlight")
   });
});

它基本上是在任何段落中查找文本，然后将其切成句子，并用class="sentence"放在一个范围内，因此我可以单击任何句子并切换CSS类，该类在我的styles.css文件中定义用黄色突出显示句子，它是：

.highlight{
    background: yellow;
}

现在，当我单击浏览器操作（扩展图标）时，它会激活，我可以单击一个句子以突出显示它，但是当我转到另一个选项卡或导航到另一个站点时，我希望它停止。我该怎么做？

最佳答案

问题

您似乎不了解浏览器操作的行为。如果要使用浏览器操作来控制扩展，则需要向onClick的browserAction事件添加侦听器，因此，当用户单击它时，可以将脚本和CSS插入当前页面内。

解

首先，编辑您的manifest.json，不需要"content_scripts"字段，因为只需要在用户单击时插入脚本。因此，为您的"background"脚本添加background.js字段，并为tabs API添加权限。更改后，您的manifest.json如下所示：

{
  "name": "Page highlight ",
  "description": "Make the current page red",
  "version": "2.0",
  "permissions": [
    "activeTab",
    "tabs"
   ],
   "background" {
       "scripts": ["background.js"]
   },
   "browser_action": {
    "default_title": "highlight sentence on click"
  },
  "manifest_version": 2
}

在编辑background.js之前，您必须删除$(document).ready(...)侦听器，因为如果将脚本插入页面并单击浏览器操作，则很有可能将其插入到已加载的页面中，因此就绪的侦听器将不行。另外，您的代码是错误的，因为.map()方法返回一个数组，因此在替换元素的html之前必须先.join()它。我为你编辑。您的新myscript.js将是这样的：

$('p').each(function() {
    $(this).html($(this).text().split(/([\.\?!])(?= )/).map(
        function(v){return '<span class="sentence">'+v+'</span>'}
    ).join(''));
});

$('.sentence').click(function(){
    $(this).toggleClass("highlight");
});

好的，现在在您的background.js中，您需要向chrome.browserAction.onClick事件添加一个侦听器，并在用户单击浏览器操作时使用chrome.tabs.executeScript()和chrome.tabs.insertCSS()注入所需的脚本和CSS，这是：

chrome.browserAction.onClicked.addListener(function(tab) {
    chrome.tabs.executeScript(tab.id, {file: "jquery-1.11.1.min.js"});
    chrome.tabs.executeScript(tab.id, {file: "myscript.js"});
    chrome.tabs.insertCSS(tab.id, {file: "style.css"});
});

这就是您所需要的，现在，当您单击扩展程序的浏览器操作时，脚本将被注入到页面中，并且您可以突出显示句子。

工作实例

您可以下载并测试我为您制作的一个有效示例HERE。