如何在Chrome扩展程序的地址栏中添加图标？ [英] How do I add an icon in the address bar for a Chrome extension?
问题描述
我不知道该怎么做，而且文档看起来并不明显。
我试着做了一个 background_page ，并在其中放置 chrome.pageAction.show（tab.id）; ，但这似乎不起作用。
我不想使用 browser_action 图标，因为图标仅反映插件的状态，但不是一个用于执行任何操作的按钮。
如何随时在地址栏中为任何页面/选项卡添加page_action的图标？
编辑：这是我的manifest.json：
{
name：My First First Extension：D，
version：0.0.1，
description：Awesomeness，
background_page： background.html，
page_action：{
default_icon：icon.png
}，
content_scripts：[ {
matches：[http：// * / *，https：// * / *]，
js：[mmm.js]
}]
}
其中icon.png是19x19像素的PNG图形。这里是background.html源代码，我试图让所有标签都显示page_action图标：
<！DOCTYPE HTML>
< html>
< head>
< script>
chrome.pageAction.show（tab.id）;
< / script>
< / head>
< / html>
>
-
不能在背景页面中使用内联脚本块 - js代码只能从链接脚本运行（如下所示：< script type =text / javascriptsrc =background.js>< / script> ）。这是因为内容安全策略。
-
正如在abraham的回答中指出的那样，因为您希望所有页面都显示图标，所以应该使用browser_action而不是page_action。根据 Google的pageAction文档页面：
请勿将页面操作用于对大多数页面有意义的功能。
使用浏览器操作。
页面操作的图标出现在omnibar（Chrome的地址栏）中，而浏览器的图标动作显示为omnibar旁边的工具栏按钮。无论是可以用来反映插件的状态和作为一个动作按钮。
$ b $ h2解决方案
不能在背景页面中使用内联脚本块 - js代码只能从链接脚本运行（如下所示：< script type =text / javascriptsrc =background.js>< / script> ）。这是因为内容安全策略。
正如在abraham的回答中指出的那样，因为您希望所有页面都显示图标，所以应该使用browser_action而不是page_action。根据 Google的pageAction文档页面：
请勿将页面操作用于对大多数页面有意义的功能。
使用浏览器操作。
页面操作的图标出现在omnibar（Chrome的地址栏）中，而浏览器的图标动作显示为omnibar旁边的工具栏按钮。无论是可以用来反映插件的状态和作为一个动作按钮。
$ b $ h2解决方案
要显示图标，您必须调用： chrome.pageAction.show（tabId）。然而，你不能只从内容脚本中调用它，因为chrome.pageAction.show（）必须通过tabId，而tabId是从chrome.tabs中获取的，而 chrome.tabs无法从内容脚本访问。
要添加浏览器操作按钮和在单击时定义它的行为，在manifest.json文件中定义browser_action元素...
browser_action：{
default_title：action description，
default_icon：icon.png
}
...并将此代码放置在后台脚本中：
//定义浏览器时的行为点击动作图标
chrome.browserAction.onClicked.addListener（function（tab）{
//当用户点击浏览器动作图标
}时执行）;
或，如果您想违背约定并使用pageAction，您可以使用您问题中的manifest.json代码，并将以下代码放入后台脚本中：
//显示页面操作图标在omnibar。
function showPageAction（tabId，changeInfo，tab）{
chrome.pageAction.show（tabId）;
};
//当选项卡的URL更改时调用上述函数。
chrome.tabs.onUpdated.addListener（showPageAction）;
有关进一步研究，请查看其中一些扩展示例。
I'm not sure how to do it, and the documentation doesn't seem to make this quite obvious.
I tried making a background_page and putting chrome.pageAction.show(tab.id); inside it, but that doesn't seem to work.
I don't want to use the browser_action icon because the icon merely reflects the status of the plugin, but it is not a button for performing any actions.
How do I add the page_action's icon inside the address bar for any page/tab at all times?
EDIT: Here's my manifest.json:
{
"name": "My Very First Extension :D",
"version": "0.0.1",
"description": "Awesomeness",
"background_page": "background.html",
"page_action": {
"default_icon": "icon.png"
},
"content_scripts": [{
"matches": ["http://*/*", "https://*/*"],
"js": ["mmm.js"]
}]
}
Where icon.png is a 19x19 pixel PNG graphic. Here's the background.html source, where I'm trying to make the page_action icon appear for all tabs:
<!DOCTYPE html>
<html>
<head>
<script>
chrome.pageAction.show(tab.id);
</script>
</head>
</html>
I see two issues with your code.
You cannot use inline script blocks in your background page -- js code can only be run from a linked script (like so:
<script type="text/javascript" src="background.js"></script>). This is because of the Content Security Policy.As noted in abraham's answer, since you want the icon to appear for all pages, you should use browser_action, not page_action. According to Google's pageAction documentation page:
Don't use page actions for features that make sense for most pages. Use browser actions instead.
Icons for page actions appear inside the omnibar (Chrome's address bar), while icons for browser actions appear as a toolbar button next to the omnibar. Either can be used to reflect the status of the plugin and as an action button.
Solutions
To get the icon to appear, you have to call: chrome.pageAction.show(tabId). However, you cannot just call this from a content script, because chrome.pageAction.show() must be passed the tabId, and tabId is retrieved from chrome.tabs, and chrome.tabs is not accessible from content scripts.
To add a browser action button and define it's behavior when clicked, define the browser_action element in your manifest.json file ...
"browser_action": {
"default_title": "action description",
"default_icon": "icon.png"
}
... and place this code in your background script:
// Define behavior when browser action icon is clicked
chrome.browserAction.onClicked.addListener(function(tab) {
// executed when the user clicks on the browser action icon
});
Or, if you want to go against convention and use a pageAction, you can use the manifest.json code from your question and place the following into your background script:
// Show page action icon in omnibar.
function showPageAction( tabId, changeInfo, tab ) {
chrome.pageAction.show(tabId);
};
// Call the above function when the url of a tab changes.
chrome.tabs.onUpdated.addListener(showPageAction);
For further research, check out the source code of some of their sample extensions.
这篇关于如何在Chrome扩展程序的地址栏中添加图标？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
