CODEWITHSUNDEEP
javascriptgoogle-chrome-extensionchrome-extension-manifest-v3
aron.duby
aron.duby

Reputation: 2292

Chrome Extension Action Not Showing Disabled with Declarative Content

Working on a chrome extension that only works on specific urls and want the pinned icon to show disabled/greyscale when not on a matching page. When on a matching page it should go back to the normal full color icon. I've done this before using declarative content and v2 of manifest, but I can't seem to get it working with version 3. I think it may be disabling/enabling because it doesn't seem to trigger outside of the site, but it doesn't change visual ever. Bonus if we can change the title when it enables/disables.

manifest.json

{
  "name": "Wheel of MatchPlay",
  "description": "Wheel of Names creation for MatchPlay tournaments",
  "version": "0.1.0",
  "manifest_version": 3,
  "permissions": [
    "storage",
    "declarativeContent",
    "activeTab",
    "scripting"
  ],
  "host_permissions": [
    "*://wheelofnames.com/*",
    "*://app.matchplay.events/*"
  ],
  "action": {
    "default_state": "disabled",
    "default_title": "not a matchplay tournament",
    "default_icon": {
      "16": "icons/icon-16.png",
      "32": "icons/icon-32.png",
      "48": "icons/icon-48.png",
      "128": "icons/icon-128.png"
    }
  },
  "background": {
    "service_worker": "background.js"
  },
  "icons": {
    "16": "icons/icon-16.png",
    "32": "icons/icon-32.png",
    "48": "icons/icon-48.png",
    "128": "icons/icon-128.png"
  }
}

background.js

// Wrap in an onInstalled callback to avoid unnecessary work
// every time the service worker is run
chrome.runtime.onInstalled.addListener((details) => {

    chrome.storage.sync.set({
        MATCHPLAY_KEY,
        WHEEL_KEY,
    });

    // if details.reason === chrome.runtime.OnInstalledReason.INSTALL
    // chrome.runtime.openOptionsPage();

    // Page actions are disabled by default and enabled on select tabs
    chrome.action.disable();

    // replace all rules...
    chrome.declarativeContent.onPageChanged.removeRules(undefined, () => {
        // with a new rule...
        chrome.declarativeContent.onPageChanged.addRules([
            {
                // That fires when a page's URL is matchplay tournaments
                conditions: [
                    new chrome.declarativeContent.PageStateMatcher({
                        pageUrl: {
                            hostEquals: 'app.matchplay.events',
                            // pathPrefix: '/tournaments'
                        },
                    })
                ],
                // And show's the extension's action
                actions: [
                    new chrome.declarativeContent.ShowAction()
                ],
            }
        ]);
    });
});

chrome.action.onClicked.addListener(async (tab) => {
    const tabId = tab.id;
    chrome.action.disable(tabId);
    chrome.action.setBadgeBackgroundColor({ tabId, color: '#f00' });
    chrome.action.setBadgeText({ tabId, text: '...' });

    // TODO -- do something about not having keys?

    // load the data and create the wheel
    const [_, tid] = tab.url.match(/tournaments\/(\d+)/);
    const tournament = await loadTournamentData(MATCHPLAY_KEY, tid);
    const wheelPath = await createWheelForTournament(WHEEL_KEY, tournament, { skipUsers: [MATCHPLAY_SELF_USER_ID]});

    // open the wheel in a new tab
    const wheelTab = await chrome.tabs.create({
        active: true,
        index: tab.index + 1,
        openerTabId: tab.id,
        url: `https://wheelofnames.com/${wheelPath}`
    });

    chrome.action.setBadgeText({ tabId, text: '' });
    chrome.action.enable(tab.id);
});

Upvotes: 0

Views: 14

Answers (1)

aron.duby
aron.duby

Reputation: 2292

Of course writing that question game me another idea for search terms, and ends up this is a browser bug with the action changes in v3 of the manifest.

Upvotes: 0

Related Questions