Question

我已经在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类，这个阶段在我的{{{ 1}}文件，我只是用黄色突出显示句子，这里是：

styles.css

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

Answer 1

问题

看起来您不了解浏览器操作的行为。如果您想使用浏览器操作来控制您的扩展程序，则需要为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 事件添加一个监听器，并注入脚本和CSS 在用户点击浏览器操作时使用chrome.tabs.executeScript()和chrome.tabs.insertCSS()，此处为：

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 。

当我移动到另一个标签时，如何让我的Chrome扩展程序停止？

1 个答案:

问题

解决方案

工作示例