如何自动重新加载我正在开发的 Chrome 扩展程序?

IT技术 javascript google-chrome google-chrome-extension
2021-01-24 10:51:06

我希望每次将文件保存在扩展文件夹中时,我的 chrome 扩展都会重新加载,而无需在 chrome://extensions/ 中明确单击“重新加载”。这可能吗?

编辑:我知道我可以更新Chrome 重新加载扩展程序的间隔,这是一个半途而废的解决方案,但我宁愿让我的编辑器(emacs 或 textmate)触发保存重新加载或要求 Chrome 进行监控更改的目录。

6个回答

您可以使用扩展Reloader Chrome浏览器:

使用扩展的工具栏按钮或浏览到“ http://reload.extensions重新加载所有解压的扩展

如果您曾经开发过 Chrome 扩展程序,您可能希望无需浏览扩展程序页面即可自动重新加载解压扩展程序的过程。

“扩展重新加载器”允许您使用 2 种方式重新加载所有解压的扩展:

1 - 扩展的工具栏按钮。

2 - 浏览到“ http://reload.extensions ”。

工具栏图标将通过单击重新加载解压的扩展。

“通过浏览重新加载”旨在使用“后构建”脚本自动执行重新加载过程 - 只需在脚本中使用 Chrome添加对“ http://reload.extensions ”的浏览,您将拥有一个刷新的 Chrome 窗口。

更新:截至 2015 年 1 月 14 日,该扩展已开源并可在 GitHub 上获得

@AlexanderMills 遗憾的是,我每次都无法打开新标签页。如果您找到更好的解决方案。至少,可以使用github.com/arikw/chrome-extensions-reloader重新加载插件
2021-03-14 10:51:06
这是迄今为止最好的解决方案,但每次我修改它正在使用的文件时,它仍然无法轻松更新扩展名,这正是我理想中的样子。
2021-03-19 10:51:06
@GabLeRoux 我来这里只是想看看是否有人已经这样做了。它就像一个魅力。
2021-04-02 10:51:06
哇,我刚刚通过使用grunt- open在文件被修改时打开设法让gruntjs与这个插件一起工作它现在的行为与 livereload 完全一样,但是每次我修改指定的插件文件之一时都会打开一个烦人的 chrome 窗口:P。谢谢!http://reload.extensions
2021-04-03 10:51:06
谢谢。想提一下我使用 PhpStorm 并添加了一个工具栏按钮,该按钮使用“reload.extensions”网址调用 chrome.exe。每当我想测试代码时,我按下那个按钮,Chrome 就会弹出更新的插件。
2021-04-09 10:51:06

更新:我添加了一个选项页面,这样您就不必再手动查找和编辑扩展程序的 ID。CRX和源代码位于:https : //github.com/Rob--W/Chrome-Extension-Reloader
更新 2:添加了快捷方式(请参阅我在 Github 上的存储库)。
包含基本功能的原始代码如下所示


创建一个扩展,并结合API使用浏览器操作方法chrome.extension.management来重新加载解压后的扩展。

下面的代码向 Chrome 添加了一个按钮,点击后将重新加载扩展程序。

manifest.json

{
    "name": "Chrome Extension Reloader",
    "version": "1.0",
    "manifest_version": 2,
    "background": {"scripts": ["bg.js"] },
    "browser_action": {
        "default_icon": "icon48.png",
        "default_title": "Reload extension"
    },
    "permissions": ["management"]
}

bg.js

var id = "<extension_id here>";
function reloadExtension(id) {
    chrome.management.setEnabled(id, false, function() {
        chrome.management.setEnabled(id, true);
    });
}
chrome.browserAction.onClicked.addListener(function(tab) {
    reloadExtension(id);
});

icon48.png:选择任何漂亮的 48x48 图标,例如:
谷歌浏览器 谷歌浏览器

@RobW 好点。我经常在编写代码的过程中进行保存,因此代码肯定会破坏有问题的插件。
2021-03-18 10:51:06
@Sudarshan 您建议使用chrome.i18n.getMessage("@@extension_id"). 然而,这会返回当前扩展的 extensionID,这没有用,因为扩展无法使用managementAPI重新加载自身(禁用后,它没有机会再次启用扩展)。
2021-03-29 10:51:06
@trusktr Scott 的回答只会重新加载背景页面。但是,这两个答案可以组合(Scotts 答案 + 辅助扩展),以便在扩展文件更改时自动重新加载扩展。但是我建议不要这样做,因为 devtools 在扩展重新加载时关闭。我经常摆弄测试扩展,并经常保存我的更改,即使语法不完整。如果启用了真正的自动重新加载,那会使我的扩展程序崩溃。
2021-04-08 10:51:06

在任何功能或事件中

chrome.runtime.reload();

将重新加载您的扩展程序(文档)。您还需要更改manifest.json文件,添加:

...
"permissions": [ "management" , ...]
...
我猜我们应该chrome.runtime.reload()从后台脚本调用
2021-03-14 10:51:06
对我来说,这个解决方案只有当我在 index.html 的脚本中编写 chrome.runtime.reload() 时才有效,其中在清单文件中按以下方式指定:**“背景”:{“页面”:“index.html” html”, ** . 在我的 content_script js 文件中,我无法访问此功能。我相信,这是出于安全考虑。
2021-03-19 10:51:06
您的内容脚本无法与 chrome API 对话。为此,您需要使用消息
2021-03-30 10:51:06
当你打电话时chrome.runtime.reload(),实际发生了什么?多个页面/标签刷新吗?
2021-04-01 10:51:06
为我工作。谢谢
2021-04-07 10:51:06

我制作了一个简单的可嵌入脚本来进行热重载:

https://github.com/xpl/crx-hotreload

它监视扩展目录中的文件更改。当检测到更改时,它会重新加载扩展并刷新活动选项卡(以重新触发更新的内容脚本)。

  • 通过检查文件的时间戳来工作
  • 支持嵌套目录
  • 在生产配置中自动禁用自身
答案需要更多的赞成票。与 Webpack 结合--watch也能很好地工作,因为你可以将它放在你的构建文件夹中,这样它只会在构建过程完成后更新。没有复杂的 Webpack 构建后命令插件。
2021-03-31 10:51:06
如果您正在寻找一种“大口风味”的解决方案,就是这样。
2021-04-01 10:51:06
@MilfordCubicle 我建议导出一个对象,该对象具有可以在 background.js 文件中调用的方法。所以import reloader from 'hot-reload'在脚本 reloader.check() 中有一些东西
2021-04-03 10:51:06
工作得很好。你有没有考虑过制作一个 npm 包?
2021-04-08 10:51:06
@pixelearth 是的,为什么不呢。嗯,但那会是什么用例呢?npm install crx-hotreload进入扩展的目录,然后像"scripts": ["./node_modules/crx-hotreload/hot-reload.js"]? 如果我错了,请纠正我。
2021-04-10 10:51:06

我正在使用快捷方式重新加载。我不想在保存文件时一直重新加载

所以我的方法是轻量级的,你可以将重新加载功能保留在

清单文件.json

{
    ...
    "background": {
        "scripts": [
            "src/bg/background.js"
        ],
        "persistent": true
    },
    "commands": {
        "Ctrl+M": {
            "suggested_key": {
                "default": "Ctrl+M",
                "mac": "Command+M"
            },
            "description": "Ctrl+M."
        }
    },
    ...
}

src/bg/background.js

chrome.commands.onCommand.addListener((shortcut) => {
    console.log('lets reload');
    console.log(shortcut);
    if(shortcut.includes("+M")) {
        chrome.runtime.reload();
    }
})

现在在 chrome 浏览器中按 Ctrl + M 重新加载

是的,您可以随时随地加载 chrome.runtime.reload()。我使用:编辑器> ctrl + s > alt + tab > ctrl + m。打开 background..js 控制台。它的速度很快,无需使用鼠标
2021-03-19 10:51:06
我认为这是所有解决方案中最简单和最好的解决方案
2021-03-19 10:51:06
太棒了。只需在编辑器中修改代码(我的是 VS Code),Alt Tab 到任何 chrome 窗口(不需要后台控制台),然后按 Ctrl M。当开发具有 DOM 修改的 contentscript 时,它是Alt Tab, Ctrl M, Ctrl R(重新加载main world页面)。
2021-03-21 10:51:06
您还可以在 browserAction 中使用重新加载功能,以便在单击按钮时重新加载。stackoverflow.com/questions/30427908/...
2021-03-31 10:51:06