Chrome 扩展弹出操作不起作用

Question

I am working on an extension for Google Chrome. This allows our users to submit support tickets from our online product directly from the page they are on.

I have been using page rules to limit the extension to only our products pages. Some of our users are experiencing an issue were they popup no longer works.

This is what some of our users are seeing when they are one our products pages. Also the extensions icon is in full colour when the user sees this. Not sure if that is useful information.

I am having trouble recreating the issue. Most of our users are remote making is difficult to diagnose.

To recreate the issue I have tried force quitting chrome and reopening. Also a restart of my computer didn't recreate it.

It does seem that removing the extension and reinstalling it fixes the issue.

This is the code that I am using to enable/disable the extension.

const PAGE_RULE = [{
    id: 'DISPLAY_RULE_SS',
    conditions: [
      new chrome.declarativeContent.PageStateMatcher({
        pageUrl: {hostSuffix: '.localhost.com', pathPrefix: '/app/'},
      }),
    ],
    actions: [new chrome.declarativeContent.ShowPageAction()],
  },]

chrome.runtime.onInstalled.addListener(function() {

    chrome.tabs.onActivated.addListener((activeInfo) => {

        chrome.declarativeContent.onPageChanged.getRules(['DISPLAY_RULE_SS'], (rules) => {

            if(rules.length !== 0){
                return;
            }

            chrome.declarativeContent.onPageChanged.addRules(PAGE_RULE);    
        });     
    });
});

This is my manifest.

{
    "name"              : "Support App",
    "version"           : "0.0.3",

    "description"       : "Fill in a brief description of your issue, along with a few details, and our support team will be notified immediately.",
    "manifest_version"  : 2,

    "icons": {
        "128" : "./img/murmuration_square_transparent.png"
    },

    "background" : {
        "scripts"    : ["./backgrounds/default_background.js"],
        "persistent" : false
    },

    "permissions" : [
        "history",
        "tabs",
        "declarativeContent",
        "activeTab",
        "https://*.localhost.com/*",
    ],

    "page_action" : {
        "default_icon"  : "./img/murmuration_square_transparent.png",
        "default_popup" : "../default_interface.html"
    },

    "web_accessible_resources": [
        "src/default_index.js"
    ]
}

I suspect that the issue is related to the fact that all the logic is within chrome.runtime.onInstalled.addListener(function() {...} but I'm unsure.

Any help is appreciated.

Answer 1

I have returned to this after some downtime and found the solution in the Google documentation. The documentation on this page state

Listeners must be registered synchronously from the start of the page.

which is exactly what I was doing when setting the page rules.

I also found on this page that

Rules are persistent across browsing sessions. Therefore, you should install rules during extension installation time using the runtime.onInstalled event. Note that this event is also triggered when an extension is updated. Therefore, you should first clear previously installed rules and then register new rules.

So I have updated my background script to run the following

chrome.runtime.onInstalled.addListener(details => {
   chrome.declarativeContent.onPageChanged.removeRules(undefined, () => {
       chrome.declarativeContent.onPageChanged.addRules(PAGE_RULE);
   });
});

Which is what is recommended in the documentation. This seems to have solved the issue we were encountering.