Question

我正在制作Chrome扩展程序，它需要从网页中获取一些值。该页面有一个带有函数的脚本元素：

<script>D.setConst({"TIME":1444940082,"LANG":"En","ID":1463887,"DEV":false,"DEV_NAME":......

当我输入我的浏览器控制台D.TIME时，我得到时间值。在那个函数中有很多变量，我需要很少的变量来扩展。

我所做的步骤： 1. manifest文件具有所有权限，声明了内容脚本。 2.有一个带有按钮的popup.html窗口，该按钮执行我的内容脚本中的代码：

function click(e) {
  chrome.tabs.executeScript(null,
      {code:'var btn = document.createElement("SCRIPT"); btn.innerHTML = "console.log(D.nonce.name);"; document.body.appendChild(btn);'},function(results){ console.log(results); } );

  //window.close();
}



document.addEventListener('DOMContentLoaded', function () {
  var divs = document.getElementById('message');
    divs.addEventListener('click', click);

});

结果在我的扩展控制台中，我得到了一个结果[object]，但没有我需要的值。我在浏览器控制台中得到了结果，但我无法获得扩展名。

我试图找到一个解决方案，但我发现的只是如何在DOM中注入脚本。

请帮忙。

编辑。

清单文件

{
  "name": "tesiting",
  "description": "generic",
  "version": "1.0",
  "permissions": [
   "https://www.example.lv/*",
   "https://*.example.*",
   "activeTab"

  ],


    "content_scripts": [
    {
      "matches": ["https://www.example.lv/*"],
      "js": ["testevent.js"]
    }
  ],

  "browser_action": {
  "default_icon": "icon.png",
    "default_title": "Mhmmm",
    "default_popup": "popup.html"
  },
  "manifest_version": 2
}

popup.html

<!doctype html>
<html>
<head>
</head>
<body>
<div id='message'>Geting code</div>
<script type="text/javascript" src="testevent.js"></script>
</body>
</html>

内容脚本 testevent.js

window.addEventListener("MyCustomEvent", function (e) {
  var check = e.detail.passback;
  console.log(check);
});


function click(b) {
  chrome.tabs.executeScript(null,
      {file: "eventer.js"});

}
document.addEventListener('DOMContentLoaded', function () {
  var divs = document.getElementById('message');
    divs.addEventListener('click', click);

});

eventer.js

var scr = document.createElement('script');
scr.textContent = '(' + function () { 
  var check = [console.log(D.nonce.name)]; //this is the function which I execute to get the desired values from it, right now it should get a Name.
  var event = document.createEvent("CustomEvent");  
  event.initCustomEvent("MyCustomEvent", true, true, {"passback":check});
  window.dispatchEvent(event); } + ')();';
(document.head || document.documentElement).appendChild(scr);
scr.parentNode.removeChild(scr);

Answer 1

只有JSON可序列化的对象（像数字，字符串，数组，简单{...}对象这样的值）可以传递给回调，而不是DOM元素。
在交互式控制台中输入代码时，代码会在页面上下文中运行，因此可以访问页面变量。对于在isolated world中运行的扩展程序内容脚本，情况并非如此。
通过<script>元素将脚本注入页面本身是一个异步操作，这意味着内容脚本会立即返回executeScript＆＃39; s回调，使用最后一个语句（代码中为document.body.appendChild）返回的非可序列化值。

您看到的控制台日志中的第一个可用值来自内部<script> - 注入的代码，而不是来自回调。

有几种解决方案：

强制立即执行内部注入代码，方法是滥用内联事件侦听器并触发其事件：Method 3 in Building a Chrome Extension - Inject code in a page using a Content script answer。
通过postMessage和自定义事件在页面注入的代码中发送值，在注入的内容脚本中使用window.addEventListener接收该值，然后通过chrome.runtime.sendMessage将其发送到扩展程序，接收它在带有chrome.runtime.onMessage的弹出脚本中。
- Chrome Extension - access document/page variable from extension
- Building a Chrome Extension - Inject code in a page using a Content script
在文档中使用"externally_connectable"：Sending messages from web pages。简而言之：显式地允许manifest.json中的页面的url，在页面注入的代码中使用chrome.runtime.sendMessage发送，在弹出/后台脚本中使用chrome.runtime.onMessageExternal接收。）
可以使用chrome extension access page variables

获取Chrome扩展程序的网页功能返回值

1 个答案: