Home/ Questions/Q 8577001
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T20:03:47+00:00

I’m not sure how to do it, and the documentation doesn’t seem to make

  • 0

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 19×19 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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I see two issues with your code.

    1. 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.

    2. 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.

    • 0