CODEWITHSUNDEEP
google-chromegoogle-chrome-extension
Chris Armstrong
Chris Armstrong

Reputation: 3625

How do I get a Chrome Extension PageAction icon to appear in the address bar?

I'm trying to build a Chrome Extension that appears as an icon in the address bar which, when clicked, sets contenteditable=true on all elements on the page, and then when clicked again sets them back to contenteditable=false.

However, I'm falling at the first hurdle... The icon isn't even showing up in the address bar.

Here's my manifest file:

 {
  "name": "Caret",
  "version": "1.0",
  "description": "Allows you to edit the content on any webpage",
  "page_action": {
    "default_icon": "icon.png"
  },
  "content_scripts": [
    {
      "matches": ["http://*/*"],
      "js": ["jquery.js", "caret.js"]
    }
  ],
  "permissions" : [
    "tabs"
  ]
}

and here's the caret.js script:

    chrome.browserAction.onClicked.addListener(function(Tab) {

    $("*").attr("contenteditable",true);

});

This is my first attempt at an extension, so it's quite probably a newbie mistake, but I'd really appreciate any help or advice!

Upvotes: 9

Views: 8616

Answers (5)

Ropstah
Ropstah

Reputation: 17784

This is no longer possible as of last release.

Chrome extension page action appearing outside of address bar

https://groups.google.com/a/chromium.org/forum/#!searchin/chromium-extensions/upcoming/chromium-extensions/7As9MKhav5E/dNiZDoSCCQAJ

Upvotes: 6

lindsaymacvean
lindsaymacvean

Reputation: 4527

I had a similar problem, here are the steps I followed to solve it:

I altered my manifest.json to include the following:

{
  "background": {  
    "scripts": ["background.js"],  
    "persistent":false  
  },  
  "page_action": {  
    "default_icon": "logo.png",  
    "default_title": "onhover title",  
    "default_popup": "popup.html"  
  }   
}

Then I inserted the following code into my background script:

// When the extension is installed or upgraded ...
    chrome.runtime.onInstalled.addListener(function() {
      // Replace all rules ...
      chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
        // With a new rule ...
        chrome.declarativeContent.onPageChanged.addRules([
          {
            // That fires when on website and has class
            conditions: [
              new chrome.declarativeContent.PageStateMatcher({
                pageUrl: { hostContains: 'myurl', schemes: ['https', 'http'] },
                css: [".cssClass"]
              })
            ],
            // And shows the extension's page action.
            actions: [ new chrome.declarativeContent.ShowPageAction() ]
          }
        ]);
      });
    });

The documentation for this can be found here... https://developer.chrome.com/extensions/declarativeContent

Upvotes: 2

Diego Carrion
Diego Carrion

Reputation: 573

I did this:

chrome.tabs.onUpdated.addListener(function(id, info, tab){
  if (tab.url.toLowerCase().indexOf("contratado.me") > -1){
    chrome.pageAction.show(tab.id);
  }
});

Upvotes: 0

Stephen M. Harris
Stephen M. Harris

Reputation: 7523

My answer to this other question gives the solution. FYI, the second code issue noted in that answer is also relevant to your code: You want the icon to appear for all pages, so you should use browser_action, not page_action. Either will work, but using a page action on every page goes against convention and makes for a less consistent end-user experience.

Upvotes: 3

Chris Armstrong
Chris Armstrong

Reputation: 3625

Ok, turns out I needed to use chrome.pageAction.show(tab.id);, which meant I needed to get the ID of the current tab, which is achieved with:

chrome.tabs.getSelected(null, function(tab) {

    chrome.pageAction.show(tab.id);


});

BUT it turns out you can't use chrome.tabs within a content script, so I had to switch to using a background page instead.

Upvotes: 16

Related Questions