Question

我为Google Chrome创建了一个扩展程序，它为指定的网页运行一个小用户，并通过 background.js 向chrome API（例如chrome.tabs和其他人）发出一些请求。

现在，我正在“开发者模式”本地测试它，如下所示：

我编辑 userscript.js 和 background.js ;
然后我转到Google Chrome中的 chrome：// extensions 标签，并从本地 D：\ my-extension 文件夹手动重新加载（CTR + R）我的扩展程序。
最后，我切换到指定网页的标签页并重新加载以查看更改。

userscript.js

background.js

这个想法是：
在用户脚本正在测试的页面上添加按钮或快捷键会很好，并在我的用户脚本中附加一种“update_extension_and_reload_page”函数，这样当我点击此按钮时它会调用扩展更新从本地文件夹 D：\ my-extension 然后页面重新加载。（另一种方法是将此类“update_extension_and_reload_page”函数分配给扩展程序的browser_action图标。）

现在，我只是感兴趣：
是否有任何类型的'chrome.extesion.update'方法，以便我可以通过 background.js 从我的 userscript.js 发出请求并调用自动重新加载扩展名（在“开发者模式”下），无需转到 chrome：// extensions 标签。

Answer 1

扩展程序可以通过调用 chrome.runtime.reload() 重新加载，因此触发扩展程序就可以了。

下面的代码将以下功能附加到浏览器操作按钮：

跟踪活动标签。
重新加载扩展程序。
重新加载活动标签。

<强>的manifest.json

...
"browser_action": {
    "default_title": "Reload"
//    "default_icon": {
//        "19": "img/icon19.png",
//        "38": "img/icon38.png"
//    },
},
...

<强> background.js

chrome.browserAction.onClicked.addListener(function (tab) {
    localStorage.tabToReload = tab.id;
    chrome.runtime.reload();
});

function reloadTab() {
    var tabID = localStorage.tabToReload;
    if (tabID) {
        chrome.tabs.reload(parseInt(tabID));
        delete(localStorage.tabToReload);
    }
}
reloadTab();
...

另请参阅 this answer ，了解如何自动执行重新加载过程。

Answer 2

略微修改上面的ExpertSystem's code以调用重新加载扩展，然后重新加载正在执行内容脚本（userscript.js）的选项卡，全部由 #reload-btn 按钮触发（如果browser_action图标被popup.html占用）。

<强>的manifest.json

...
"background":{ "scripts": ["background.js"]},

"content_scripts" : [{
        "matches" : ["https://stackoverflow.com/*"],
        "css": ["userscript.css"],          
        "js": ["jquery-latest.min.js", "userscript.js"],
        "run_at":"document_end"  
}], 

"web_accessible_resources": ["jquery-latest.min.map"],

"permissions": ["tabs"], 

"browser_action": {
    "default_icon": "icon19.png",
    "default_title": "My Extension Title",
    "default_popup": "popup.html"
}
...

<强> userscript.css

...
#reload-btn { position: fixed; top: 0; right: 0; } /* or any other position on the page */
...

<强> userscript.js

...
$("body").prepend("<button id='reload-btn'>reload extension + page reload</button>"); // some shortcut key can be additionally assigned to this button

$("#reload-btn").on("click", function() { 
    chrome.runtime.sendMessage("please, reload me");
});
...

<强> background.js

...
chrome.runtime.onMessage.addListener(
    function(message, sender) {
        if (message == "please, reload me"){
            localStorage.tabToReload = sender.tab.id;
            chrome.runtime.reload();
    }
});

function reloadTab() {
    var tabID = localStorage.tabToReload;
    if (tabID) {
        chrome.tabs.reload(parseInt(tabID));
        delete(localStorage.tabToReload);
    }
}

reloadTab();
...

Answer 3

这就是你要找的东西吗？

https://chrome.google.com/webstore/detail/extensions-reloader/fimgfedafeadlieiabdeeaodndnlbhid

信用去吧

How do I auto-reload a Chrome extension I'm developing?

谷歌浏览器：从用户脚本更新“开发者模式”（本地）扩展

3 个答案: