3

I'm going through the Google Chrome Extensions "Getting Started" tutorial, and I came across this code:

chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
  chrome.declarativeContent.onPageChanged.addRules([{
    conditions: [new chrome.declarativeContent.PageStateMatcher({
      pageUrl: {hostEquals: 'developer.chrome.com'},
    })
    ],
        actions: [new chrome.declarativeContent.ShowPageAction()]
  }]);
});

I also made sure to add the permissions:

 {
    "name": "Getting Started Example",
  ...
    "permissions": ["declarativeContent", "storage"],
  ...
  }

The expected behaviour is this

The browser will now show a full-color page action icon in the browser toolbar when users navigate to a URL that contains "developer.chrome.com". When the icon is full-color, users can click it to view popup.html.


(source: chrome.com)

But I am not sure why it doesn't work for me.

I've checked these posts, but nome of them seems to help me.

Attempts

  1. I am using the permissions bellow. But it still doesn't work.
"permissions": ["declarativeContent",  "activeTab", "storage"],
  1. I also tried to use
pageUrl: {hostContains: 'developer.chrome.com'}})

instead of

pageUrl: {hostEquals: 'developer.chrome.com'}})
  1. Tried "browser_action": {...}, instead of "page_action": {...},. I am keeping "browser_action": {...},.
Glorfindel
  • 21,988
  • 13
  • 81
  • 109
Eduardo Reis
  • 1,691
  • 1
  • 22
  • 45
  • Add `"activeTab"` to permissions or the URL pattern of the site. – wOxxOm Apr 15 '20 at 19:19
  • 1
    I already tried it. This is how my permissions are. `"permissions": ["declarativeContent", "activeTab", "storage"],` It still doesn't seem to work. – Eduardo Reis Apr 15 '20 at 19:24
  • After editing manifest.json you need to reload the extension on `chrome://extensions` page. Anyway, page action is meaningless in modern Chrome so forget about it and declarativeContent as well, simply use browser_action. – wOxxOm Apr 15 '20 at 19:28
  • I tried both `browser_action` (from the tutorial in the first page) and `page_action` (from the tutorial in the page linked on the question). I am also reloading the extension. Sometime I actually removes it and add it again, just in case that refresh button contributes for the issue. – Eduardo Reis Apr 15 '20 at 19:33
  • 1
    With browser_action there's no need for all that code, see the [documentation](https://developer.chrome.com/extensions/browserAction) and [demo extensions](https://developer.chrome.com/extensions/samples). You need to specify `"icons"` to have an icon. – wOxxOm Apr 15 '20 at 19:35
  • Check on this [Demo: Page action by URL](https://developer.chrome.com/extensions/samples). I wonder if I got the whole thing wrong. I was not focusing wether or not the icon change colours, but in the fact that the Browser Page is not showing automatically. – Eduardo Reis Apr 15 '20 at 19:52
  • 2
    Yep, like I said this API is obsolete now and it's also misleading because "show" doesn't do anything in modern Chrome (it never opened the popup though, it only showed the icon inside the address bar in old Chrome). The popup will be opened only when the icon is clicked. – wOxxOm Apr 15 '20 at 19:55
  • I thought there was something wrong with my implementation of the tutorial. When you say `obsolete`, does that mean there is a new API for extensions? – Eduardo Reis Apr 15 '20 at 20:02
  • 1
    There's only browser_action that actually makes sense now. In the future there will be just `action`. – wOxxOm Apr 15 '20 at 20:04
  • Thanks a lot @wOxxOm – Eduardo Reis Apr 15 '20 at 20:05
  • @wOxxOm, I would appreciate to have your comments in as an answer in order to to give disclosure to the question. – Eduardo Reis Apr 15 '20 at 20:12

1 Answers1

1

The Chrome Extension documentation has become pretty confusing after the introduction of manifest version 3. It has many breaking changes, but the documentation is only partially updated to reflect this.

This specific issue looks like a mix of manifest v2 and v3 syntax. The declarativeContent API for toggling icon color is only necessary when using manifest v3. However, in manifest version 3 browser_action and page_action is merged under the property action.

I got it working with this configuration:

{
  "manifest_version": 3,
  "permissions": ["declarativeContent"],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_title": "The title",
    "default_popup": "popup.html"
  }
}
theisof
  • 671
  • 6
  • 6