当我移动到另一个选项卡时，如何停止我的Chrome扩展

How can I get my Chrome extension to stop when i move to another tab?

本文关键字：何停止 我的 扩展 Chrome 移动 另一个 选项      更新时间：2023-09-26

我已经在谷歌开发者Chrome网站上完成了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;
}

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

问题

看起来你没有理解浏览器操作的行为。如果您想使用浏览器操作控制扩展，则需要向browserAction的onClick事件添加一个侦听器，因此当用户单击它时，您可以将脚本和CSS注入当前页面中。

解决方案

首先，编辑您的manifest.json，您不需要"content_scripts"字段，因为您只需要在用户单击时注入脚本。因此，添加background.js脚本的"background"字段和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。

注意：自2021年1月起，将Manifest V3与chrome.scripting.executeScript()和chrome.scripting.insertCSS()（具有scripting权限）一起使用，而不是使用chrome.tabs.executeScript()。

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"});
});

这就是你所需要的，现在当你点击扩展的浏览器操作时，脚本将被注入页面，你将能够突出显示你的句子。

相关文章：