Chrome 擴展：加載和執行外部腳本
[英]Chrome extension: load and execute external script
問題描述
我無法將外部 js 腳本加載和執行到我的 chrome 擴展程序中。 看起來與這個問題相同，但我仍然無法弄清楚為什么它在我的情況下不起作用。
這個想法是我想在我的內容腳本中包含一些應該解析網頁內容的默認函數。 對於一些特定的網頁，我想加載和使用特定的解析器，所以我嘗試為一個 web 頁面加載適當的 js 腳本，並且這個腳本應該擴展默認解析器的功能。
現在我只嘗試從外部腳本執行代碼，但有這樣的錯誤： Unchecked runtime.lastError while running tabs.executeScript: No source code or file specified at Object.callback
這是我的manifest.json ：
{
"name": "Extension name",
"version": "1.2",
"description": "My chrome extension",
"browser_action": {
"default_popup": "popup.html",
},
"content_scripts": [{
"css": [
"style.css"
],
"js": [
"bower_components/jquery/dist/jquery.js",
"bower_components/bootstrap/dist/js/bootstrap.js",
"content.js"
],
"matches": ["*://*/*"]
}],
"web_accessible_resources": [
"frame.html",
"logo-48.png"
],
"icons": {
"16": "logo-16.png",
"48": "logo-48.png",
"128": "logo-128.png"
},
"permissions": [
"tabs",
"storage",
"http://*/",
"https://*/"
],
"manifest_version": 2
}
這是popup.html
<!doctype html>
<html>
<head>
<title>Title</title>
<script src="popup.js"></script>
</head>
<body>
<ul>
<li>Some link</li>
</ul>
</body>
</html>
在popup.js 中，我像這樣執行腳本：
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.executeScript(tabs[0].id, {file: "http://127.0.0.1:8000/static/plugin/somesite.js"});
});
我做錯了什么，我錯過了什么嗎？ 或者我應該使用另一種方法來解決問題嗎？
3 個解決方案
解決方案1
11 2016-04-15 11:12:20
谷歌瀏覽器禁止像您嘗試一樣從外部來源運行腳本，並且會阻止甚至不發布您的擴展程序。 所有腳本都必須在擴展中。 但是有一個解決方案， 來自 google chrome doc ：
對通過 HTTP 加載的資源的限制僅適用於那些直接執行的資源。 例如，您仍然可以自由地將 XMLHTTPRequest 連接到您喜歡的任何來源； 默認策略不會以任何方式限制 connect-src 或任何其他 CSP 指令。
如果您非常需要外部源，您可以執行 XML HTTP 請求並對內容使用 eval。 這是谷歌文檔的一部分代碼：
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://127.0.0.1:8000/static/plugin/somesite.js", true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
// WARNING! Might be evaluating an evil script!
var resp = eval("(" + xhr.responseText + ")");
// Or this if it's work
chrome.tabs.executeScript(tabs[0].id, {code: xhr.responseText});
}
}
xhr.send();
或者你可以使用一些庫， $.get() 與 jquery或$http 與 angularjs 。 如果您在代碼中添加 eval，則必須在 manifest.json 中添加以下內容：
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"`,
解決方案2
5 2016-04-15 11:17:34
根據此處的討論： https : //groups.google.com/a/chromium.org/forum/#!topic /chromium-extensions/ LIH7LGXeQHo ，
從外部源運行腳本可能會導致您的擴展被取消發布或阻止。
只是提供另一種方法，您可以對內容腳本進行 ajax 調用，然后調用chrome.tabs.executeScript
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
$.get("http://127.0.0.1:8000/static/plugin/somesite.js", function(result) {
chrome.tabs.executeScript(tabs[0].id, {code: result});
}, "text");
});
解決方案3
1 2016-04-20 12:55:07
executeScript 的 'file' 選項僅與嵌入在擴展中的文件相關。 我知道， 文檔對此並不清楚，雖然它可能適用於 URL，但聽起來像是一個 hack，而不是一個功能。 為了將來自外部源的腳本加載到您的活動頁面中，您通常必須執行一個腳本，該腳本在那里加載的文檔的 DOM 內創建一個腳本標記。
我覺得我在這里之前已經回答了這個問題的部分內容： 為什么 chrome.tabs.executeScript() 需要更改當前網站的 DOM 以及如何使用 jQuery 來實現相同的效果？
總結一下：
1）為了從擴展程序訪問網頁，您需要為其添加權限：
"permissions" : [
"tabs",
[...]
"http://*/*",
"https://*/*" ],
2) 您需要執行某種代碼來創建加載所需內容的 DOM 腳本元素：
chrome.tabs.executeScript(tab.id, {
code : 'var script=document.createElement(\'script\');' +
'script.onload=function() { /*do something in the page after the script was loaded*/ };' +
'script.src=\'http://127.0.0.1:8000/static/plugin/somesite.js\';' +
'document.body.appendChild(script);'
}, function (returnedValue) {
// do something in the extension context after the code was executed
});
看看上面鏈接中的remex函數，我認為它解決了像這里這樣寫成字符串的 javascript 的很多丑陋之處。
將外部JSON加載到Google Chrome擴展腳本中？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.