Page action icon displays only in extension page

Question

I'm learning about creating chrome extensions. I have studied about page actions, which is used to create an icon inside the address bar. My code as follows:

In my manifest.json:

{
  "manifest_version" :2,    
  "name" : "GTmetrix",
  "description": "Test google chrome extension",
  "version" : "1.0",
  "page_action":{
     "default_icon"  : "icon.png",
     "default_popup" : "popup.html",
     "default_title" : "Test Google chrome extension"
  },
  "background": { "scripts": ["background.js"] },
  "permissions" : [
     "activeTab"
  ]
}

In my background.js

chrome.tabs.getSelected(null, function(tab) {
  chrome.pageAction.show(tab.id);
});

In my popup.html

<html>
<head>
        <script src="jquery.min.js"></script>
        <script src="popup.js"></script>
        <!--<script src="background.js"></script>-->
        <style>
             body{ background:pink}
            .block{ width : 100%;}
        </style>
</head>
<body>
        <div class="block">
            <h2>Test extension</h2>
            <button id="checkpage">Check this page now!!</button>
        </div>
</body>
</html>

So when I'm using the above code,it shows like below: enter image description here

But when I goes to another pages like google or others, it will not show the icon:

enter image description here

What goes wrong and what is the use of background in my manifest.json and why we are using content_script, what is the exact meaning of that?

I have looked through the devguide

Please don't use backticks (\`) to highlight normal text. They are for inline code. — Xan, Jul 02 '15 at 09:03
this may also help i think [Refer](https://robots.thoughtbot.com/how-to-make-a-chrome-extension) — PHP Learner, Jul 02 '15 at 10:20

score 2 · Accepted Answer · answered Jul 02 '15 at 08:58

2

Use following in background.js

chrome.tabs.onUpdated.addListener(function(id, info, tab){
    showPageAction(tab);
});

chrome.tabs.onActivated.addListener(function(id, info, tab){
    chrome.tabs.query({ currentWindow: true, active: true },
        function (tabArray) {
            if(tabArray[0]){
                showPageAction(tabArray[0]);
            }
        });
});

function showPageAction(tab){
    chrome.pageAction.show(tab.id)
}

There are other methods too. Chrome Extension samples

PS:

Before showing you can check tab URL or something as criteria.
don't user page action if applicable to all tabs - use browser action instead.

answered Jul 02 '15 at 08:58

Amit G

2,293
3
24
44

great!!it works...but it shows for all the pages...how do i restrict for a specific pages? for example i want to restrict this extension from google... – PHP Learner Jul 02 '15 at 09:55
showPageAction(tab) -> tab is an object of https://developer.chrome.com/extensions/tabs#type-Tab. usually tab.url is used to restrict it to certain domains. – Amit G Jul 02 '15 at 10:19
can you please explain this answer:( – PHP Learner Jul 02 '15 at 11:26
I have referred [Link-for display on specific URL](http://stackoverflow.com/questions/21902247/display-page-action-icon-on-specific-url) in that i dnt the meaning of `~tab.url.indexOf('.pl')`?Can someone explain me? – PHP Learner Jul 03 '15 at 05:36
1

tab.url -> string containing URL -> indexOf() string function -> find index of "p1" in url. – Amit G Jul 03 '15 at 06:11

score 2 · Answer 2 · edited May 23 '17 at 10:26

So, you're starting to learn Chrome extensions..

You looked at the Devguide page.

What you absolutely must look at is the Overview page, especially the architecture part. It explains what different scripts (background, content, popup) do and how they interact.

For example, content scripts are needed when you need to interact with the content of an open tab.

Why doesn't your extension work?

The background script loads at the moment your extension is loaded. So, your code executes:

// Grab the currently active tab
// (this is deprecated by the way, tabs.query is the modern way)
chrome.tabs.getSelected(null, function(tab) {
  // Show the button on that tab
  chrome.pageAction.show(tab.id);
});

It works, quite perfectly, from your screenshots.

And after that, your background script is done. There's nothing left to do for it, and it will not do anything. And, as Page Actions require to be told to show up, you'll never see the icon again.

So how to make it work?

Well, your background page is normally a central dispatch for various events. You need to tell Chrome you want to react to something by registering an event handler.

Amit G in his answer proposes a series of chrome.tabs API events to "hook" into. Personally, I would cover onUpdated, onCreated and onReplaced events to catch all page changes.

Are event handlers the only way?

In many cases, yes, but showing a page action is lucky. It is supported by declarativeContent API, that allows you to set rules for when it should appear and let Chrome take care of the rest.

The docs have plenty of good examples.

That seems like a lot of work for showing an icon!

Well, yes, because Page Actions are supposed to be triggered by some condition.

From the documentation:

If you want the extension's icon to always be visible, use a browser action instead.

So unless you need to show an icon only on some pages, use Browser Action instead.

Thank you so much!! i will learn from your answer and if i have any doubts will ask u.... — PHP Learner, Jul 02 '15 at 09:56
I have referred [Link-for display on specific URL](http://stackoverflow.com/questions/21902247/display-page-action-icon-on-specific-url) in that i dnt the meaning of `~tab.url.indexOf('.pl')`?Can someone explain me? — PHP Learner, Jul 03 '15 at 05:36
Not here. It's not a forum, you shouldn't ask follow-up questions in answers. And I'm sure it's answered already, search SO. — Xan, Jul 03 '15 at 06:14