如何将数据从内容脚本传递到页面级别？ [英] How to pass data from content-script to page-level?

问题描述

我将所有js代码注入到首页，但它需要用于ui和东西的图片，这些图片只能在chrome.extension.getUrl的帮助下导入，并且只能从内容脚本调用，所以我已经发现了大量的建议，如何将数据传递到内容页面，而没有关于如何传回数据，完全有可能？

我的代码现在看起来像这样：

我的js代码，将被注入其他代码：

  var Content = {}; 
 $（document）.contentReady = function（content）{
 Content = content; 
 $（document）.ready（function（）{/ * cool stuff here，that require content * /}）; 
} 
 var event = new CustomEvent（'LoadContent'）; 
 window.dispatchEvent（event）; 
  

内容脚本：

  document.querySelector（ '头'）的appendChild（jsCode）。 
 window.addEventListener（LoadContent，function（evt）{
 var content = 
 {
 data：url（+ chrome.extension.getURL（'content.smth '）+）
}; 
 document.contentReady（content）; 
}，false）; 
  

显然，我得到 document.contentReady不是函数 code>
但是，在文档中声明函数是关于如何在大约2小时的谷歌搜索后从content-script传回数据的唯一（！）建议。

解决方案

没有什么能够阻止你从 CustomEvent 的双向通信，并且它可以通过<$ c

$ p $ //页面脚本
window.addEventListener（' RecieveContent'，函数（evt）{
//用evt.detail
做一些很酷的事情））;
var event = new CustomEvent（'LoadContent'）;
window.dispatchEvent（event）;

//内容脚本
window.addEventListener（'LoadContent'，function（evt）{
content = / * ... * /
var event = new CustomEvent（'RecieveContent'，{detail：content}）;
window.dispatchEvent（event）;
}）;


可以找到更深入的答案这里。

然而，你应该问自己，你是否需要页面级脚本来查询数据，因为你完全控制了它的注入时间。确保代码已执行后，您可以使用单向方法：

  //页面脚本
窗口。 addEventListener（'RecieveContent'，function（evt）{
 //用evt.detail 
做一些很酷的事情））; 
 $ b $ //内容脚本
 jsCode.onload = function（）{
 //在页面脚本执行完毕后触发
 content = / * ... * / 
 var event = new CustomEvent（'RecieveContent'，{detail：content}）; 
 window.dispatchEvent（event）; 
} 
 document.querySelector（'head'）。appendChild（jsCode）; 
  




I'm injecting all my js code to front page, but it needs pictures for ui and stuff, that can be imported only with the help of chrome.extension.getUrl and can be called only from content-script, so I've found tons of advices how to pass data to content page, and nothing of about how pass data back, is it possible at all?

My code now looks like this:

my js code, that will be injected with other code:

var Content = {};
$(document).contentReady = function(content) {
    Content = content;
    $(document).ready(function () {/*cool stuff here, that require content*/});
}
var event = new CustomEvent('LoadContent');
window.dispatchEvent(event);

content-script:

document.querySelector('head').appendChild(jsCode);
window.addEventListener("LoadContent", function(evt) {
    var content =
    {
        data:   "url(" + chrome.extension.getURL('content.smth') + ")"
    };
    document.contentReady(content);
}, false);

And, obviously, I get document.contentReady is not a function But declaring function in document was the only(!) advice of about how to pass data back from content-script after about 2 hours of googling.

解决方案

Nothing stops you from making the CustomEvent-based communication bi-directional, and it can pass data with detail property:

// Page script
window.addEventListener('RecieveContent', function(evt) {
  // do something cool with evt.detail
});
var event = new CustomEvent('LoadContent');
window.dispatchEvent(event);

// Content script
window.addEventListener('LoadContent', function(evt) {
  content = /* ... */
  var event = new CustomEvent('RecieveContent', {detail: content});
  window.dispatchEvent(event);
});    

A more in-depth answer can be found here.

However, you should ask yourself whether you even need the page-level script to query for data, since you fully control when it's injected. You can use uni-directional approach after you make sure the code has executed:

// Page script
window.addEventListener('RecieveContent', function(evt) {
  // do something cool with evt.detail
});    

// Content script
jsCode.onload = function() {
  // This fires after the page script finishes executing
  content = /* ... */
  var event = new CustomEvent('RecieveContent', {detail: content});
  window.dispatchEvent(event);
}
document.querySelector('head').appendChild(jsCode);

这篇关于如何将数据从内容脚本传递到页面级别？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！