每次点击Chrome扩展程序图标时运行脚本


77

如何编写一个Chrome扩展程序,以便每次用户单击该图标时,我的脚本都运行,但没有打开弹出窗口?(我会自己在文档中查找此内容,但是由于任何原因,他们突然停止工作,直到现在为止我都对每个页面进行404处理)。

我假设它只是正确设置了清单。这是我现在拥有的:

{
  "name": "My Extension",
  "version": "0.1",
  "description": "Does some simple stuff",
  "browser_action": {
    "popup" : "mine.html",
    "default_icon": "logo.png"
  },
  "permissions": [
    "notifications"
  ]
}

Answers:


103

从清单的browser_action部分中删除弹出窗口,并在后台脚本中使用后台页面以及浏览器Action

chrome.browserAction.onClicked.addListener(function(tab) { alert('icon clicked')});

9
我到底把它放在哪里。没有mine.html,扩展名中的唯一文件是清单...好吧,还有图标。
Endophage

3
看看背景页面-code.google.com/chrome/extensions/background_pages.html。那就是您放置长期运行的代码以及在不同页面上通用的代码的地方。指向以上文档的链接提供了一个带有browserAction.onClicked的示例
arunkumar

知道了 我最初尝试了一个背景页面,但不知道browserAction.onClicked。
Endophage

3
如果manifest.json中没有browser_action部分,则它将无法工作。您必须在manifest.json中添加空的browser_action:“ browser_action”:{}
Adam Faryna

64

首先,如果您不想显示弹出窗口,请"popup" : "mine.html"从弹出窗口中删除manifest.json(显示在问题中)。

manifest.json将看起来像这样:

{
  "name": "My Extension",
  "version": "0.1",
  "manifest_version" : 2,
  "description": "Does some simple stuff",
  "background" : {
    "scripts" : ["background.js"]
  },
  "browser_action": {
    "default_icon": "logo .png"
  },
  "permissions": ["activeTab"]
}
  • 请注意,manifest_version必须存在并且必须存在2
  • 请注意,该activeTab权限已添加。
  • 请注意,单击浏览器操作按钮时,您只能做一件事:可以显示弹出窗口,也可以执行脚本,但不能两者都做。

其次,要在单击图标时执行脚本,请将下面的代码放在background.js文件中(文件名在中指定manifest.json):

chrome.browserAction.onClicked.addListener(function(tab) {
   chrome.tabs.executeScript(null, {file: "testScript.js"});
});

最后,testScript.js单击图标时应在其中放置要执行的代码。


3
截至2017年2月,此解决方案完全可以完成原始问题中的要求。
mjamore

3
太好了,这对我来说是2018年6月的工作。值得投票!@kerzek大概是这样的:js function buttonClicked(tab) { var msg = { message: "user clicked!" } chrome.tabs.sendMessage(tab.id, msg); }
KF

1
为了清楚起见,只有删除弹出窗口后,onClicked监听器才会触发。是一个或另一个,而不是两者。
HughHughTeotl


3

您需要添加背景文件。但首先您需要在manifest.json中添加一个属性,例如,

"background":{
    "scripts":["background.js"]
}

现在将扩展文件夹中的文件命名为background.js,有一种方法可以将对象从背景发送到内容脚本,假设您的内容脚本名为content.js,那么您需要做的就是在background.js文件中编写此代码段

chrome.browserAction.onClicked.addListener(sendfunc);
function sendfunc(tab){
    msg={txtt:"execute"};
    chrome.tabs.sendMessage(tab.id,msg);
}

上面的代码正在执行的操作是将一个名为msg的对象发送到内容页面,并且此msg对象的属性txtt等于“ execute”。接下来需要做的是比较内容脚本中的值

chrome.runtime.onMessage.addListener(recievefunc);
function receivefunc(mssg,sender,sendResponse){
    if(mssg.txtt==="execute"){
      /*  
         your code of content script goes here
      */
    }
}

现在,只要单击扩展图标,就会将一个名为msg的对象从后台发送到内容。如果函数“ recievefunc()”与您其余的代码匹配,则会将其txtt属性与字符串“ execute”进行比较。

注意:msg,txtt,sendfunc,receivefunc,mssg都是变量,而不是chrome关键字,因此您可以使用任何想要的东西。

希望能帮助到你。

:)


0

这正是我所需要的,但我应该添加一点:如果您所需要的只是一次事件,例如当用户单击扩展程序的图标时,那么背景页面就是资源的浪费,因为它将一直在后台运行。改用事件页:

"background": {
    "scripts": ["script.js"],
    "persistent": false
}

如果是这样,则应改用它们content_script并将脚本附加到DOM。仅使用一次在后台运行的功能从一开始就破坏了使用后台的功能概念。只是一个想法,并不意味着这个想法是行不通的。
KF
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.