Google Chrome 扩展程序 - 单击工具栏图标时打开新选项卡
Posted
技术标签:
【中文标题】Google Chrome 扩展程序 - 单击工具栏图标时打开新选项卡【英文标题】:Google Chrome Extensions - Open New Tab when clicking a toolbar icon 【发布时间】:2011-03-12 10:19:26 【问题描述】:如何为 Chrome 创建一个扩展程序,将一个图标添加到工具栏,当您单击它时,它会打开一个带有一些本地网页的新选项卡(例如:f.html)?
我看到了this question,但它并没有真正解释我应该在清单文件中添加什么...
【问题讨论】:
【参考方案1】:这不适用于较新的 chrome 应用程序。
较新的 chrome 应用具有 manifest_version: 2 要求标签打开为:
chrome.browserAction.onClicked.addListener(function(activeTab)
var newURL = "http://www.youtube.com/watch?v=oHg5SJYRHA0";
chrome.tabs.create( url: newURL );
);
【讨论】:
这是更好、更及时、更准确的答案,仅供参考 @DehanWjiesekara 把它放在例如background.js 并在你的清单中有"background": "scripts": [ "background.js" ]
。
将 tabs.create
用于 onInstalled 在加载基本上只有一个本地 index.html 的解压扩展和一个现在完全打开 index.html 的 background.js 的上下文中触发一个新标签?出于某种原因,这对我现在不起作用,一定是我缺少一些简单的东西。
请记住,使用“选项卡”权限会在安装时向用户显示警告,即 chrome 扩展程序需要“读取您的浏览历史记录”,但如果您只想打开一个新选项卡,那么只需使用“activeTab”权限,它不会触发该警告。
你必须这样做,不是吗?【参考方案2】:
好吧,在extensions docs 中,它在manifest 中声明,您需要包含“标签”作为其权限。他们解释 hello world 应用程序的方式相同:
清单文件:
"name": "My Extension",
"version": "1.0",
"description": "Opens up a local webpage",
"icons": "128": "icon_128.png" ,
"background_page": "bg.html",
"browser_action":
"default_title": "",
"default_icon": "icon_19.png"
,
"permissions": [
"tabs"
],
在background page 中,您在浏览器操作上监听鼠标单击事件。
chrome.browserAction.onClicked.addListener(function(tab)
chrome.tabs.create('url': chrome.extension.getURL('f.html'), function(tab)
// Tab opened.
);
);
正如您在上面所注意到的,您会看到我使用了您在另一篇文章中看到的问题。请注意,这未经测试,但我相信它应该可以工作。
【讨论】:
请注意,添加“选项卡”权限会在安装时向用户显示“读取您的浏览历史记录”权限警告。文档说大多数chrome.tabs
不需要这个权限developer.chrome.com/extensions/tabs因为我没有密切关注这个,最近我从chrome.google.com/webstore/detail/inbox-by-gmail-checker/…失去了数百个用户【参考方案3】:
chrome.tabs.create 需要“tabs”的权限。
只需在扩展中使用 window.open 即可,无需任何许可。并且代码更短。我建议这个解决方案。
window.open(url,'_blank');
【讨论】:
我确实在我的扩展程序中使用了相同的代码,以便在单击通知按钮时打开新标签。但现在 3 个月后,我在单击该按钮时收到 aw..snap 页面错误。你知道为什么会这样吗? P.s:如果我使用另一个网址(例如:www.google.com),它可以正常工作,但它不适用于我的网站。 这似乎对我有用(尽管我只在我正在开发的本地非捆绑扩展中尝试过)。以上是关于Google Chrome 扩展程序 - 单击工具栏图标时打开新选项卡的主要内容,如果未能解决你的问题,请参考以下文章
如何使用 Chrome 扩展程序自动保存 Google Chrome 开发者工具的网络面板日志?
Google Chrome 扩展程序 + 使用 Facebook 登录 + Parse