Firefox Manifest V2扩展Content Script函数调用异常问题

问题根源 #

核心问题是页面导航方式差异导致事件监听失效：

• 页面刷新时，浏览器会完整加载整个页面，DOMContentLoaded、load等事件正常触发；
• 若新URL是单页应用(SPA)的前端路由跳转，页面不会重新加载，仅更新DOM，原来的初始加载事件不会再次触发，导致foo()无法执行；
• 未明确指定content script注入时机时，可能在页面资源未完全加载时就执行foo()，导致逻辑失效。

解决方案 #

1. 调整content script注入时机 #

修改manifest.json，明确指定content script在页面完全加载后注入：

{
    "manifest_version": 2,
    "version": "1.0",
    "name": "example extension",
    "icons": {
        "16": "img.png",
        "48": "img.png",
        "128": "img.png"
    },
    "permissions": ["activeTab", "contextMenus"],
    "background": {
        "scripts": ["background.js", "examplescript.js"],
        "persistent": false
    },
    "content_scripts": [
        {
            "matches": ["https://www.example.com/*"],
            "js": ["main.js"],
            "run_at": "document_completed" // 新增：页面所有资源加载完成后注入
        }
    ]
}

2. 重构foo()触发逻辑，覆盖所有页面变化场景 #

修改main.js，统一触发逻辑并监听SPA路由变化：

let exampleArray = ['exampleItem1', 'exampleItem2'];
function foo(){
    let n = 0;
    exampleArray.forEach((element) => {
        /* 你的业务代码 */
    });
    let msg = `example text: ${n}`;
    console.log(msg);
}

// 统一触发foo的逻辑
function triggerFoo() {
    // 页面已完全加载，直接执行
    if (document.readyState === "complete") {
        foo();
    } else {
        // 监听页面加载完成事件，确保只执行一次
        window.addEventListener('load', () => {
            foo();
        }, { once: true });
    }
}

// 初始页面加载时触发
triggerFoo();

// 监听SPA路由变化场景
// 处理hash路由变化
window.addEventListener('hashchange', triggerFoo);
// 处理history pushState/replaceState跳转（大部分SPA用这种方式）
(function() {
    const originalPushState = history.pushState;
    const originalReplaceState = history.replaceState;

    history.pushState = function(...args) {
        originalPushState.apply(this, args);
        triggerFoo();
    };

    history.replaceState = function(...args) {
        originalReplaceState.apply(this, args);
        triggerFoo();
    };
})();
// 处理浏览器前进/后退
window.addEventListener('popstate', triggerFoo);

function main(){
    let exampleInterval = setInterval(()=>{
        /* 你的业务代码 */
    },200);
}
main();

关键说明 #

• run_at: document_completed：确保content script在页面所有资源（图片、样式、脚本）加载完成后才注入，避免foo()因DOM未完全就绪而失效；
• 统一的triggerFoo函数：封装页面加载状态判断逻辑，避免重复代码；
• SPA路由监听：通过重写history API和监听hashchange、popstate事件，覆盖所有前端路由跳转场景，确保每次页面内容更新时都触发foo()；
• { once: true }：确保load事件只执行一次，避免重复绑定导致foo()多次执行。

内容的提问来源于stack exchange，提问作者xyz