在chrome扩展中显示几个JS变量值 [英] showing several JS variables value in chrome extensions

问题描述

是否有可能让我的网站2,3个js变量在扩展中生成，所以我将能够看到我建立的网站背后的信息

扩展将帮助我开发我的网站

解决方案

查看给定网站的变量（使用内容脚本）是可能的。只需注入您自己的内容脚本，并创建一个读取变量的脚本标签。由于内容脚本可以执行的某些限制，您不能使用这些变量，也不能在扩展中修改它们。您可以阅读与嵌入式页面沟通。

例如，以下内容将读取网页中的JS变量并将其内容传输到后台页面，以便我们的扩展可以处理它。您会在后台页面检查器中注意到该变量已成功传递：

content_script.js

  // JS脚本注入，以便我们可以读取JS类'InternalJSVariable'
 var postFriendMap = function（）{
 var textarea =的document.getElementById（ '传送DOM的区域'）; 
 textarea.value = JSON.stringify（InternalJSVariable）; 
}; 
 
 //创建一个虚拟textarea DOM。 
 var textarea = document.createElement（'textarea'）; 
 textarea.setAttribute（'id'，'transfer-dom-area'）; 
 textarea.style.display ='none'; 
 document.body.appendChild（textarea）; 
 
 //开始注入JS脚本。 
 var script = document.createElement（'script'）; 
 script.appendChild（document.createTextNode（'（'+ postFriendMap +'）（）;'））; 
 document.body.appendChild（script）; 
 
 //通知我们的世界我们已收到朋友地图数据。 
 chrome.extension.sendRequest（{internalVariable：textarea.value}）; 
 
 //清理，因为我们不再需要这个。 
 document.body.removeChild（textarea）; 
  

background.html

  chrome.extension.onRequest.addListener（function（request，sender，sendResponse）{
 if（request.internalVariable）{
 var internal_object = JSON。 parse（request.internalVariable）; 
 console.log（internal_object）; 
} 
}）; 
  

is it possible to get my website 2,3 js variables in an extensions i build so i will be able to see the info behind the site i build

the extension will help me develop my sites

解决方案

Seeing the variables of a given website (using Content Scripts) is possible. Just inject your own content script, and create an script tag that reads your variables. You cannot use those variables, or modify them on your extension due to some limitations of what Content script can do. You can read the following docs on Communication with the embedding page.

For example the following will read a JS variable in the webpage and transfer its contents to the background page so we can let our extension deal with it. You will notice in the background page inspector, that the variable is successfully passed:

content_script.js

// JS script injection, so that we can read the JS class 'InternalJSVariable'
var postFriendMap = function() {
  var textarea = document.getElementById('transfer-dom-area');
  textarea.value = JSON.stringify(InternalJSVariable);
};

// Create a dummy textarea DOM.
var textarea = document.createElement('textarea');
textarea.setAttribute('id', 'transfer-dom-area');
textarea.style.display = 'none';
document.body.appendChild(textarea);

// Start injecting the JS script.
var script = document.createElement('script');
script.appendChild(document.createTextNode('(' + postFriendMap + ')();'));
document.body.appendChild(script);

// Inform our world that we have received the friend map data.
chrome.extension.sendRequest({internalVariable: textarea.value});

// Clean up since we no longer need this.
document.body.removeChild(textarea);

background.html

chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
  if (request.internalVariable) {
    var internal_object = JSON.parse(request.internalVariable);
    console.log(internal_object );
  }
});

这篇关于在chrome扩展中显示几个JS变量值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！