通过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"}); 
});