chrome插件新版本（v3版本）中的熱更新，即加載更新遠(yuǎn)程js的方法探索

1 主流方案及嘗試

現(xiàn)在瀏覽器插件中，大多采用直接調(diào)用遠(yuǎn)程代碼的方式進(jìn)行熱更新，由于安全策略逐步增強(qiáng)，越來(lái)越不支持熱更新了；chrome在新v3版本插件中直接給禁止了；對(duì)于v2版本則即將廢棄使用。

或者要翻墻到google應(yīng)用商店提交審核，才能熱更新。

?

2 當(dāng)前問(wèn)題

1、由于安全策略逐步增強(qiáng)，越來(lái)越不支持熱更新了，之前可以直接調(diào)用遠(yuǎn)程資源的方法均被禁止了；

2、chrome插件開(kāi)發(fā)中，v2版本是支持熱更新的，但明年v2版本將被廢棄到；

3、所有chrome插件都要盡快升級(jí)成v3版本，然而v3版本不支持熱更新。

4、需要要到翻墻到google應(yīng)用商店提交審核，等審核通過(guò)后，且用戶本身要至此翻墻才能進(jìn)行插件熱更新。

3 技術(shù)原理

chrome.runtime.getURL獲取js地址的方法是新版v3瀏覽器本身支持的方法，可以用它來(lái)獲取插件安裝包中的內(nèi)部靜態(tài)資源，來(lái)進(jìn)行加載。

本發(fā)明流程如下圖所示：

瀏覽器插件的新版均只允許加載本地資源，而限制外部資源的加載；本發(fā)明同樣遵循瀏覽器內(nèi)核要求，在serviceworker中加載插件中預(yù)制資源inject_base.js到頁(yè)面里，需要直接或間接用chrome.runtime.getURL方法加載inject_base.js資源，然后再?gòu)膇nject_base.js中加載遠(yuǎn)端inject.js資源即可，此處兩步過(guò)程可以擴(kuò)展到三步或更多步驟，但不可省略這兩個(gè)步驟。

inject.js中會(huì)有插件的核心功能資源，當(dāng)需要熱更新插件功能時(shí)，直接更新外部資源inject.js即可。

4 方案實(shí)施

在遵循瀏覽器內(nèi)核安全控制要求下，我們可以如下操作：

1） 先在serviceworker中通過(guò)chrome.runtime.getURL獲取url地址的方法動(dòng)態(tài)加載預(yù)制資源inject_base.js；此處若用chrome.scripting.executeScript方法動(dòng)態(tài)加載預(yù)制資源，則需先加載一個(gè)橋接資源inject_base_bridge.js，然后再在inject_base_bridge.js中用chrome.runtime.getURL方法動(dòng)態(tài)加載遠(yuǎn)端indect_base.js，然后進(jìn)行第二步；

function inject(){
	const injectPath = "js/inject.js";
	 const script = document.createElement("script");
	 script.setAttribute("type", "text/javascript");
	 // 重點(diǎn)是這句
	 script.src = chrome.runtime.getURL(injectPath);
	 document.body.appendChild(script);
}

該步驟中需要注意的是：不可以直接用chrome.runtime.getURL或chrome.scripting.executeScript這兩個(gè)方法，而是需要用onMessage監(jiān)聽(tīng)來(lái)動(dòng)態(tài)使用這兩個(gè)方法，否則后續(xù)js資源的加載則只在安裝或刷新時(shí)生效一次，而不能在每個(gè)頁(yè)面中都成功加載。

?

function injectJsCode(srcList=["js/inject_base.js"]) {
  chrome.tabs.query(
    {
      active: true,
      currentWindow: true,
    },
    (tabs) => {
      if (tabs[0]) {
        // 注入插件預(yù)制js
        let _injectJsList = srcList;
        chrome.scripting.executeScript({
          target: { tabId: tabs[0].id },
          files: _injectJsList,
        });
      }
    }
  );
}

chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) {
  switch (message.type) {
    case "inject-code":
      injectJsCode();
      return true;
  }
});

2）再?gòu)膇nject_base.js中加載遠(yuǎn)端inject.js資源即可；當(dāng)發(fā)布新功能時(shí)，直接發(fā)布遠(yuǎn)端的新版inject.js即可直接熱更新插件功能。

具體邏輯如下圖所示：

onMessage監(jiān)聽(tīng)來(lái)動(dòng)態(tài)使用擦灰姑娘如方法，確保后續(xù)js資源在每個(gè)頁(yè)面中都成功加載；需要從content_scripts中設(shè)置發(fā)送腳本輸入的消息通知：

chrome.runtime.sendMessage(chrome.runtime.id, message, callback)

這樣就可以隨時(shí)愉快的更新插件發(fā)布新功能了。

5 方案總結(jié)

該方案目前所打的包，在用戶直接下載、解壓、使用時(shí)比較合適；大多在未發(fā)布到chrome應(yīng)用商店時(shí)使用較為便捷。若要在chrome官方應(yīng)用商店發(fā)布，則需改造。待后續(xù)總結(jié)整理...

審核編輯 黃宇