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

时间:2011-08-23 22:36:09

标签: google-chrome google-chrome-extension

如何编写chrome扩展名,以便每次用户点击图标时,我的脚本都会运行,但是没有打开弹出窗口? (我会在自己的文档中查看这些内容,但无论出于什么原因,他们突然停止工作,404到每一页,我都到了这一步。)

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

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

6 个答案:

答案 0 :(得分:79)

从清单的browser_action部分删除popup,并在后台脚本中使用background pagesbrowser Action

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

答案 1 :(得分:45)

首先,如果您不想显示弹出窗口,请从"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是您在单击图标时应放置要执行的代码的位置。

答案 2 :(得分:5)

不要指定弹出页面,而是使用chrome.browserAction.onClicked API,记录here

答案 3 :(得分:2)

如果您想遵循 manifest 3,那么您应该这样做:

chrome.action.onClicked.addListener(function (tab) {
    console.log("Hello")
});

另外请注意,您不会在普通控制台中看到 Hello,要查看 hello 转到扩展菜单并单击特定扩展菜单前面的 inspect views

答案 4 :(得分:0)

这正是我需要的,但我应该补充一下: 如果您需要的只是一次性事件,例如当用户点击扩展程序的图标时,那么背景页面会浪费资源,因为它将始终在后台运行。 请改用事件页面:

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

答案 5 :(得分:0)

您需要添加背景文件。 但首先需要在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关键字,所以你可以使用你想要的任何东西。

希望它有所帮助。

:)