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

你可以用 " Extensions Reloader " 对于铬:

http://reload.extensions "

如果你曾经开发过Chrome扩展,你可能会想 自动化重新加载未打包扩展的过程,而无需 需要浏览扩展页。

“Extensions Reloader”允许您重新加载所有未打包的扩展 使用2种方式:

2-浏览到“ ".

工具栏图标将使用一次单击重新加载未打包的扩展。

使用“后期构建”脚本-只需添加一个浏览到 http://reload.extensions “在脚本中使用Chrome,您将 有一个刷新的Chrome窗口。

更新: available on GitHub

更新 :我添加了一个选项页,这样您就不必再手动查找和编辑扩展的ID。 CRX https://github.com/Rob--W/Chrome-Extension-Reloader
更新2:添加了快捷方式(请参阅Github上的myrepository)。
_{原始代码,其中包括 基本功能 如下所示 .}

创建一个扩展,并使用 Browser Action chrome.extension.management API重新加载未打包的扩展。

下面的代码在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图标,例如:

在任何功能或事件中

chrome.runtime.reload();

将重新加载您的扩展( docs 清单.json

...
"permissions": [ "management" , ...]
...

我制作了一个简单的可嵌入脚本,用于执行热重新加载:

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

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

• 支持嵌套目录
• 在生产配置中自动禁用自身

// Reload client for Chrome Apps & Extensions.
// The reload client has a compatibility with livereload.
// WARNING: only supports reload command.

var LIVERELOAD_HOST = 'localhost:';
var LIVERELOAD_PORT = 35729;
var connection = new WebSocket('ws://' + LIVERELOAD_HOST + LIVERELOAD_PORT + '/livereload');

connection.onerror = function (error) {
  console.log('reload connection got error:', error);
};

connection.onmessage = function (e) {
  if (e.data) {
    var data = JSON.parse(e.data);
    if (data && data.command === 'reload') {
      chrome.runtime.reload();
    }
  }
};

此脚本使用websockets连接到livereload服务器。然后,它将在从livereload重新加载消息时发出chrome.runtime.reload()调用。下一步是将这个脚本添加到manifest.json中作为后台脚本运行,瞧!

注意:这不是我的解决方案。我只是把它贴出来。我在生成的 Chrome Extension generator (很棒的工具!)。我把这个贴在这里是因为它可能有用。

Chrome扩展具有 permission system 它不允许它(有些人在这样做) had the same problem as you proposed solution (theory) 使用 chrome.extension.getViews() ,但也不能保证有效。

如果可以添加到 manifest.json 一些Chrome内部页面,如 chrome://extensions/ ,可以创建一个与 Reload 锚定,并使用外部程序,如 XRefresh (一个Firefox插件-有一个 Chrome version 使用Ruby和WebSocket),您可以实现您所需要的:

XRefresh是一个浏览器插件 将刷新当前网页由于 选定文件夹中的文件更改。这个 使用您喜爱的HTML/CSS编辑 编辑。

这是不可能做到的,但我认为你可以用不同的方式使用相同的概念。

重新加载

(疯狂至极,但可能有用)

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

所以我的方法是轻量级的,您可以将重载函数保留在

清单.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重新加载

下面是一个函数,您可以使用它监视文件的更改,并在检测到更改时重新加载。它通过AJAX轮询它们,并通过window.location.reload()重新加载。我想你不应该在分发包中使用这个。

function reloadOnChange(url, checkIntervalMS) {
    if (!window.__watchedFiles) {
        window.__watchedFiles = {};
    }

    (function() {
        var self = arguments.callee;
        var xhr = new XMLHttpRequest();

        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4) {
                if (__watchedFiles[url] &&
                    __watchedFiles[url] != xhr.responseText) {
                    window.location.reload();
                } else {
                    __watchedFiles[url] = xhr.responseText
                    window.setTimeout(self, checkIntervalMS || 1000);
                }
            }
        };

        xhr.open("GET", url, true);
        xhr.send();
    })();
}

reloadOnChange(chrome.extension.getURL('/myscript.js'));

也许我参加派对有点晚了,但我已经通过创作为自己解决了这个问题 https://chrome.google.com/webstore/detail/chrome-unpacked-extension/fddfkmklefkhanofhlohnkemejcbamln

它通过重新加载工作 chrome://extensions file.change 事件通过WebSocket传入。

一个基于吞咽的如何发射的例子 扩展文件夹中的文件更改事件可在以下位置找到: https://github.com/robin-drexler/chrome-extension-auto-reload-watcher

为什么要重新加载整个选项卡,而不只是使用扩展管理api来重新加载/重新启用扩展?当前再次禁用和启用扩展会导致任何打开的检查窗口(控制台日志等)关闭,我发现在活动开发期间这太烦人了。

如果您使用webpack进行开发,则有一个自动重新加载插件: https://github.com/rubenspgcavalcante/webpack-chrome-extension-reloader

const ChromeExtensionReloader = require('webpack-chrome-extension-reloader');

plugins: [
    new ChromeExtensionReloader()
]

如果您不想修改webpack.config.js,还提供CLI工具:

npx wcer

mozilla的大人物刚刚发布了一个新的 https://github.com/mozilla/web-ext 你可以用来启动 web-ext run --target chromium

也许有点晚回答,但我想 crxreload 可能对你有用。这是我在开发时尝试重新加载保存工作流的结果。

使用 npm init

npm install --save-dev gulp-open && npm install -g gulp

gulpfile.js

看起来像:

/* File: gulpfile.js */

// grab our gulp packages
var gulp  = require('gulp'),
    open = require('gulp-open');

// create a default task and just log a message
gulp.task('default', ['watch']);

// configure which files to watch and what tasks to use on file changes
gulp.task('watch', function() {
  gulp.watch('extensionData/userCode/**/*.js', ['uri']);
});

gulp.task('uri', function(){
  gulp.src(__filename)
  .pipe(open({uri: "http://reload.extensions"}));
});

这对我用CrossRider开发很有用,你可以观察改变你观察文件的路径,也假设你已经安装了npm和node。

如果不安装扩展名,您的内容文件(如html和manifest文件)是不可更改的,但是我相信JavaScript文件是动态加载的,直到扩展名打包。

Clerc - for Chrome Live Extension Reloading Client

连接到LiveReload兼容的服务器,以便在每次保存时自动重新加载扩展。

唯一的大问题是对manifest.json的更改。清单中任何微小的输入错误都可能导致重新加载尝试失败,并且您将无法卸载/重新安装扩展以再次加载更改。

Clerc在重新加载后将完整的重新加载消息转发给您的扩展,因此您可以选择使用提供的消息来触发进一步的刷新步骤。

多亏了@GmonC和@Arik以及一些业余时间,我才成功地完成了这个任务。我不得不更改两个文件才能使之生效。

(1) 为该应用程序安装LiveReload和Chrome扩展。

<LiveReloadInstallDir>\Bundled\backend\res\livereload.js

(3) 换行 #509 到

this.window.location.href = "http://reload.extensions";

(4) 现在安装另一个扩展 Extensions Reloader 其中包含有用的链接处理程序,可以在导航到时重新加载所有开发扩展 "http://reload.extensions"

(5) 现在换个分机 background.min.js 以这种方式

if((d.installType=="development")&&(d.enabled==true)&&(d.name!="Extensions Reloader"))

替换为

if((d.installType=="development")&&(d.enabled==true)&&(d.name!="Extensions Reloader")&&(d.name!="LiveReload"))

当我有更多的时间来处理这个问题时,我可能会创建一个扩展来消除对这两个扩展的需求。

在那之前,我一直在做我的分机 Projext Axeman

grunt 基于项目,提供引导,脚手架,一些自动化的预处理能力,以及自动重新加载(无需交互)。

Bootstrap Your Chrome Extension

如果你有Mac电脑,最简单的方法就是使用Alfred应用程序!

快去 ,然后添加下面链接中提供的工作流并自定义所需的热键(我喜欢使用++R)。这就是全部。

现在,每次你用热键, 谷歌浏览器 将重新加载,无论此时使用哪个应用程序。

我还将在这里展示 /usr/bin/osascript文件 重新加载chrome.alfredworkflow文件

tell application "Google Chrome"
  activate
  delay 0.5
  tell application "System Events" to keystroke "r" using command down
  delay 0.5
  tell application "System Events" to keystroke tab using command down
end tell

工作流文件是 ReloadChrome.alfredworkflow

我想一夜之间重新加载(更新)我的扩展,这是我在background.js中使用的:

var d = new Date();
var n = d.getHours();
var untilnight = (n == 0) ? 24*3600000 : (24-n)*3600000; 
// refresh after 24 hours if hour = 0 else
// refresh after 24-n hours (that will always be somewhere between 0 and 1 AM)
setTimeout(function() {
    location.reload();
}, untilnight);

当做, 彼得

我主要在Firefox开发 web-ext run 文件更改后自动重新加载扩展名。一旦准备好了,我会在Chrome上做最后一轮测试,以确保Firefox中没有出现任何问题。

但是,如果您想主要在Chrome中开发,并且不想安装任何第三方扩展,那么另一个选择是创建 test.html 文件,并添加一堆 SSCCE's <script> 标记以插入扩展脚本。

这并不能完全重现扩展运行的环境,但对于许多简单的事情来说已经足够了。

热释光;博士

创建一个WebSocket服务器,将消息发送到可以处理更新的后台脚本。如果你正在使用webpack并且不打算自己动手, webpack-run-chrome-extension 我可以帮忙。

回答

您可以创建一个WebSocket服务器,作为WebSocket客户机(通过 window 对象)。然后,扩展将通过将WebSocket服务器附加到某个侦听器机制(如webpack devServer)来侦听文件更改。

文件有变吗?将服务器设置为向扩展发送消息以请求更新(将ws消息广播到客户端)。然后,扩展重新加载,回复“ok,reloaded”,并继续侦听新的更改。

计划

1. 设置WebSocket服务器(以发送更新请求)
2. 找到一个服务,可以告诉你什么时候文件发生了变化(网页包/其他捆绑软件)
5. 重新加载扩展名

怎么

ws . 对于文件更改,使用一些监听器/钩子(比如webpack watchRun 钩子)。对于客户部分, native WebSocket

现在,要使扩展自身重新加载,可以调用 chrome.runtime.reload() chrome.management.setEnabled() (需要 "permissions": [ "management" ] 在舱单中)。

在理想情况下,工具 webpack-dev-server chrome-extension 本地URL。在这之前,让服务器代理扩展名的文件更改似乎是目前为止最好的选择。

可用的开源替代方案

网页包运行chrome扩展 ,这正是我上面计划的。

我已经分叉了 LiveJS

正如文档中提到的:下面的命令行将重新加载一个应用程序

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --load-and-launch-app=[path to the app ]

var exec = require('child_process').exec;



gulp.task('reload-chrome-build',function(cb){

console.log("reload");

var cmd="./reloadchrome.sh"

exec(cmd,function (err, stdout, stderr) {
    console.log("done: "+stdout);

    cb(err);
    }
);});

这就是AutoIt或其他软件的闪光点。关键是编写一个模拟当前测试阶段的脚本。习惯于至少使用其中一种,因为许多技术没有明确的工作流程/测试路径。

Run("c:\Program Files (x86)\Google\Chrome\Application\chrome.exe")
WinWaitActive("New Tab - Google Chrome")
Send("^l")
Send("chrome://extensions{ENTER}")
WinWaitActive("Extensions - Google Chrome")
Send("{TAB}{TAB}{TAB}{TAB}{TAB}{TAB}")
Send("{ENTER}")
WinWaitActive("Extensions - Google Chrome")
Send("{TAB}{TAB}")
Send("{ENTER}")
WinWaitActive("Developer Tools")
Send("^`")

显然,您需要更改代码以满足您的测试/迭代需求。确保选项卡单击的位置与锚定标记所在的位置一致chrome://extensions site. 您还可以使用相对于窗口的鼠标移动和其他类似的宏。

我将以如下方式向Vim添加脚本:

map <leader>A :w<CR>:!{input autoit loader exe here} "{input script location here}"<CR>

这意味着,当我在Vim中时,我按下ENTER上面的按钮(通常负责:|和\)即leader按钮,并在它后面加上大写字母“a”,它保存并开始我的测试阶段脚本。

替代品 AutoIt 可以找到 here

作者推荐了该网页包插件的下一个版本: https://github.com/rubenspgcavalcante/webpack-extension-reloader . 它对我很有效。

是的,你可以间接地做到!这是我的解决办法。

在manifest.json中

{
    "name": "",
    "version": "1.0.0",
    "description": "",
    "content_scripts":[{
        "run_at":"document_end",
        "matches":["http://*/*"],
        "js":["/scripts/inject.js"]
    }]
}

(function() {
    var script = document.createElement('script'); 
    script.type = 'text/javascript'; 
    script.async = true;
    script.src = 'Your_Scripts';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(script, s);
})();

注入的脚本可以从任何位置注入其他脚本。

孤立的世界 content script execution environment

浏览器同步

使用惊人的 Browser-Sync

• 在源代码更改(HTML、CSS、图像等)时更新浏览器(任意)
• 支持Windows、MacOS和Linux
• 您甚至可以使用移动设备观看代码更新(实时)

安装在MacOS上

brew install nvm             # install a Node version manager
nvm ls-remote                # list available Node versions
nvm install v10.13.0         # install one of them
npm install -g browser-sync  # install Browser-Sync

如何对静态站点使用浏览器同步

我们来看两个例子:

browser-sync start --server --files . --host YOUR_IP_HERE --port 9000

browser-sync start --server --files $(ack --type-add=web:ext:htm,html,xhtml,js,css --web -f | tr \\n \ ) --host $(ipconfig getifaddr en0) --port 9000

这个 --server 选项允许您在终端的任何位置运行本地服务器,并且 --files 用于指定将跟踪哪些文件的更改。我更喜欢对跟踪的文件更加具体,所以在第二个示例中我使用 ack ipconfig 在MacOS上查找我的当前IP。

如何对动态站点使用浏览器同步

--proxy 切换以让浏览器同步知道该服务器的主机在哪里。

browser-sync start --files $(ack --type-add=rails:ext:rb,erb,js,css,sass,scss,coffee --rails -f | tr \\n \ ) --proxy 192.168.33.12:3000 --host $(ipconfig getifaddr en0) --port 9000 --no-notify --no-open

在上面的例子中,我已经有一个Rails应用程序在我的浏览器上运行了 192.168.33.12:3000 --no-notify 停止浏览器同步在每次更改代码和密码时在浏览器上向我发送通知警报 --no-open 停止在服务器启动时立即加载浏览器选项卡的浏览器同步行为。

重要提示: 如果您使用的是Rails,请避免在开发中使用Turbolinks,否则在使用 --代理

学分: Start a local live reload web server with one command

不能直接做。对不起的。

如果您想将其视为一项功能,可以在 http://crbug.com/new