Skip to content

Latest commit

 

History

History
99 lines (80 loc) · 2.77 KB

ep_003.md

File metadata and controls

99 lines (80 loc) · 2.77 KB
Raw

Episode Three: Browser Button and Default Pop-Up

Canary version: 80.0.3968.0

Third on the API checklist in the migration guide (yes, I am skipping background pages for now, because they are complicated):

Are you using the browser_action or page_action property in manifest.json? Replace with action.

Here's our V2 manifest, which adds browser_action so a default title shows on browser button hover and a pop-up window appears on click:

{
  "version": "0.0.103",
  "name": "Baseline",
  "description": "Manifest V2 Baseline",
  "permissions": ["*://*/*"],
  "browser_action": {
    "default_title": "MV2Baseline",
    "default_popup": "html/popup.html"
  },
  "content_scripts": [
    {
      "js": ["js/content.js"],
      "matches": ["*://*/*"]
    }
  ],
  "manifest_version": 2
}

Here's our tiny pop-up window for Manifest V2, saved as ep_003/v2/html/popup.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Pop-Up from Manifest V2</title>
  </head>
  <body>
    <h1>Manifest V2 Baseline</h1>
  </body>
</html>

Here's our V3 manifest, with our default_title and default_popup in the new action field:

{
  "version": "0.0.103",
  "name": "Test",
  "description": "Manifest V3 Test",
  "host_permissions": ["*://*/*"],
  "action": {
    "default_title": "MV3Test",
    "default_popup": "html/popup.html"
  },
  "content_scripts": [
    {
      "js": ["js/content.js"],
      "matches": ["*://*/*"]
    }
  ],
  "manifest_version": 3
}

Here's our tiny pop-up window for Manifest V3, saved as ep_003/v3/html/popup.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Pop-Up from Manifest V3</title>
  </head>
  <body>
    <h1>Manifest V3 Test</h1>
  </body>
</html>

Load by dragging ep_003/v2 and ep_003/v3 into chrome://extensions. As far as I know, both of these should still run in Chrome Canary.

Results

  • In chrome://extensions or about:blank only the baseline version will show an active browser button. Unless this is a side effect of the error noted below, this is smart and will save us lots of trouble later.
  • In tabs with pages loaded -- don't forget to reload if you've just installed the extension! -- both buttons will be active.
  • Only the baseline version will show the default title or load the pop-up window.

What's Going On?

  • Under the Errors button (which we've started to ignore, because all it usually contains is that warning about the maximum currently-supported manifest version being 2) you'll find this:

'action' requires trunk channel or newer, but is is the canary channel.

... with a bunch of yellow highlight over your action object.

(╯°□°)╯︵ ┻━┻