一塊兒來作Chrome Extension《一些問題》

目錄

1. Unchecked runtime.lastError: The message port closed before a response wa received.
2. 使用 eval
3. Content script注入iframe
   1. Extenstion內的html
   2. 站外鏈接

1. Unchecked runtime.lastError: The message port closed before a response wa received.

此錯誤通常發生在background js和content js通信的時候，問題描述得也很是清楚，解決方法很是簡單，即在收到消息後，在同步時間裏send respnose就能夠了。

注意：send response若是在異步方法裏，並不能解決這個問題。

// Example:
// background js 或content js
chrome.extension.onMessage.addListener(function(request, _, sendResponse) {
    sendResponse('');
});

2. 使用eval

Chrome Extension默認是禁止使用eval方法的，使用以前，須要先在manifest.json裏開啓，以下：

"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"

3. 使用iframe

注入iframe一樣受content_security_policy限制，並且會受到目標站點的content_security_policy限制。關於content_security_policy內容比較多，這裏分紅兩種狀況

3.1 Extension內的html

注入的iframe加載Extension內的html稍微沒有這麼麻煩，只須要在manifest.json裏指定要加載的html就行了

"web_accessible_resources": ["example.html"]

注入iframe的src，可使用chrome.runtime.getUrl()來獲取地址

let src = chrome.runtime.getURL('example.html')

注：要注入網站的content_security_policy對這樣的iframe注入會不會有影響，目前尚未測試到。

此方法在 Fika (reader-mode) 擴展裏有使用

3.2 站外鏈接

如上所說，注入iframe是受目標網站的content_security_policy限制的，因此，若是目標網站不容許，你的注入將會失敗，如medium.com的content_security_policy關於frame-src的部分:

default-src 'self';

...

frame-src chromenull: https: webviewprogressproxy: medium: 'self';

...

它容許了https的地址，因此，注入的iframe加載https地址是沒有問題的，而http的地址將被拒絕。由於注入已經離開了Chrome Extenstion的範圍，因此，無論你怎麼對Chrome Extension的content_security_policy進行設置並不會有用。

關於content_security_policy，能夠看 https://www.html5rocks.com/en/tutorials/security/content-security-policy/