通過background.js訪問網站變量與注入腳本

Question

我正在構建Chrome擴展，當點擊工具欄圖標時，我正在執行background.js，並在background.js我正在運行執行腳本。就像這樣：

chrome.tabs.executeScript(null, { file: "libs/jquery.min.js" }, function() { 
    chrome.tabs.executeScript(null, { file: "scripts/myScript.js" }) 
}); 

在myScript.js，我可以證實，它已執行jQuery和運行我的腳本了。

---

myScript.js：

console.log('test'); 

$(document).ready(function() { 
    console.log('jQuery test'); 
}) 

他們都工作

---

在這一點上，我想實現一個變量，它是網頁（不是我寫的內）;假設它是var helloWorld = "the content"。

如果我嘗試在控制檯（開發工具），console.log(helloWorld)，它的工作原理。不過，如果我嘗試在myScript.js，它說：

$(document).ready(function() { 
    console.log(helloWorld) 

    setTimeout(function() { 
     console.log(helloWorld) 
    }, 1500) 
}) 

Uncaught ReferenceError: helloWorld is not defined

---

我已經看到了一些解決方法爲內容腳本的做法，但我不能使它成爲executeScript方式工作。如何訪問myScript.js中的helloWorld變量？

---

我試過使用捕食者的方法。下面是代碼：

injected.js：

chrome.runtime.sendMessage("njfhnpgecmbmbipcjpkkglbkpcbjammb", {varName: "test"}); 
// I tried returning a string first 

background.js

chrome.tabs.executeScript(null, { file: "libs/jquery.min.js" }, function() { 
    chrome.tabs.executeScript(null, { file: "scripts/myScript.js" }) 
}); 

chrome.runtime.onMessageExternal.addListener(function(message, sender, sendResponse){ 
    console.log(message.varName); 
    if(message.varName !== undefined){ 
     console.log(message.varName); 
    } 
}); 

清單：

"background": { 
    "scripts": ["scripts/background.js"], 
    "persistent": true 
}, 

根據您的第一個答案

，myScript.js：

根據更新後的答案10

，myScript.js：

function exec(fn) { 
    var script = document.createElement('script'); 
    script.setAttribute("type", "application/javascript"); 
    script.textContent = '(' + fn + ')();'; 
    document.body.appendChild(script); //run the script 
    document.body.removeChild(script); //clean up 
} 

background.js沒有趕上

Answer 1

您的內容腳本是在一個單獨的環境中運行的消息，這意味着它不能訪問網頁的全局範圍。但是我沒有以前成功地通過

location.href = "javascript: /* some messaging code */"; 

來解決這個問題通過注入代碼也許不是最好的做法，但它的工作對我來說（也有可能是新的API，可以讓你沒有這個事。）

Answer 2

就像我在注射從內容腳本功能或代碼的網站頁面後，上面的評論說，你可以從外部該頁面發送郵件給background.js擴展的。

chrome.runtime.sendMessage("extensionIdHere", {varName: varValue}); 

在這之後，你可以有這樣的代碼來聽這些外部信息，並作出迴應或使用該被罰的價值。

chrome.runtime.onMessageExternal.addListener(function(message, sender, sendResponse){ 

    if(message.varName !== undefined){ 
     //process the info 
    } 

}); 

編輯：先試試這個，如果它不工作更多下面：

你manifest.json底部的添加並再次嘗試：

"externally_connectable": { 
    "matches": [ "https://theSiteWhereYouAreInjectinTheCode.com/*" ] 
} 

如果仍然沒之後嘗試將此功能添加到您的content script即可將該代碼注入網頁。

//Injects functions directly into the dom 
function exec(fn) { 
    var script = document.createElement('script'); 
    script.setAttribute("type", "application/javascript"); 
    script.textContent = '(' + fn + ')();'; 
    document.body.appendChild(script); //run the script 
    document.body.removeChild(script); //clean up 
} 

然後調用它有像這樣：

exec(function(){ 
    chrome.runtime.sendMessage("njfhnpgecmbmbipcjpkkglbkpcbjammb", {varName: "helloWorld"}); 
});