Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<h2>I see two issues with your code.</h2> <ol> <li><p>You cannot use inline script blocks in your background page -- js code can only be run from a linked script (like so: <code>&lt;script type="text/javascript" src="background.js"&gt;&lt;/script&gt;</code>). This is because of the <a href="http://developer.chrome.com/trunk/extensions/contentSecurityPolicy.html#JSExecution" rel="nofollow noreferrer">Content Security Policy</a>.</p></li> <li><p>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 <a href="https://developer.chrome.com/extensions/pageAction.html#tips" rel="nofollow noreferrer">Google's pageAction documentation page</a>: </p> <blockquote> <p>Don't use page actions for features that make sense for most pages. Use browser actions instead.</p> </blockquote> <p>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.</p></li> </ol> <h2>Solutions</h2> <p>To get the icon to appear, you have to call: <code>chrome.pageAction.show(tabId)</code>. 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 <a href="http://developer.chrome.com/extensions/content_scripts.html" rel="nofollow noreferrer">chrome.tabs is not accessible from content scripts</a>.</p> <p>To add a browser action button and define it's behavior when clicked, define the browser_action element in your manifest.json file ...</p> <pre><code>"browser_action": { "default_title": "action description", "default_icon": "icon.png" } </code></pre> <p>... and place this code in your background script:</p> <pre><code>// Define behavior when browser action icon is clicked chrome.browserAction.onClicked.addListener(function(tab) { // executed when the user clicks on the browser action icon }); </code></pre> <p><strong>Or</strong>, 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:</p> <pre><code>// 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); </code></pre> <p>For further research, check out the source code of some of their <a href="https://developer.chrome.com/extensions/samples.html" rel="nofollow noreferrer">sample extensions</a>.</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload