Javascript 在循环中打开多个选项卡，并将不同的数据传输到每个选项卡'；s内容脚本_Javascript_Google Chrome_Google Chrome Extension

Javascript 在循环中打开多个选项卡，并将不同的数据传输到每个选项卡'；s内容脚本

javascript google-chrome google-chrome-extension

Javascript 在循环中打开多个选项卡，并将不同的数据传输到每个选项卡'；s内容脚本,javascript,google-chrome,google-chrome-extension,Javascript,Google Chrome,Google Chrome Extension,我的扩展是这样工作的：用户按下分机弹出窗口中的Run按钮弹出脚本从活动选项卡收集一系列数据，如文章链接、标题等问题#1:我该如何实现这一点使用循环中收集的数据打开多个选项卡内容脚本被注入到每个打开的选项卡中每个打开的选项卡的内容脚本都应该从该数组的元素接收自己的数据问题#2:我该如何实现这一点目前，我正在使用chrome.storage.local存储收集的整个数据数组，并希望将循环索引变量传递给每个内容脚本，以便内容脚本从chrome.storage.local读取正确的元

我的扩展是这样工作的：

用户按下分机弹出窗口中的
```
Run
```
按钮
弹出脚本从活动选项卡收集一系列数据，如文章链接、标题等
问题#1:我该如何实现这一点
使用循环中收集的数据打开多个选项卡
内容脚本被注入到每个打开的选项卡中
每个打开的选项卡的内容脚本都应该从该数组的元素接收自己的数据
问题#2:我该如何实现这一点

目前，我正在使用

chrome.storage.local

存储收集的整个数据数组，并希望将循环索引变量传递给每个内容脚本，以便内容脚本从

chrome.storage.local

读取正确的元素

manifest.json:

{
  "manifest_version": 2,
  "name": "My Extension",
  "description":"My article Extension",
   "version": "1.0",
  "background": {
    "scripts": ["model/background.js"],
    "persistent": true
  },
  "content_scripts": [{
    "run_at": "document_start",
     "matches": ["myurl"],
      "js": ["model/contentscript.js", "model/jquery_2.1.4.min.js"]
    }],
  "browser_action": {
    "default_popup": "template/popup.html",
    "default_icon": "template/images/icon.png",
    "default_title": "Start copy articles"
  },
  "icons": {
    "16":"template/images/icon.png",
    "48":"template/images/icon.png",
    "128":"template/images/icon.png"
    },
 "permissions": [
    "tabs",
    "activeTab",
    "storage",
    "cookies"
 ]
}

popup.html

<!doctype html>

<head>
    <title>Tapito Chrome extenstion</title>
    <meta charset="utf-8">
</head>
<body>
    <p>Variable</p><br>
    <input type="text" value="" placehorlder="10" id="variable1" /><br>
    <button id="runScript">Run</button>
    <script src="popup.js" type="text/javascript"></script>

    <div id="debugMode">

    </div>
</body>

问题中的代码有一些问题：

在调用

.set

回调之前，选项卡在popup.js中打开（它与所有

chrome.

API回调一样是异步的）

内容脚本读取数据但从不使用它，因为没有消息发送到

onMessage

listener，因此它的回调永远不会被调用

manifest.json定义内容脚本自动注入规则，popup.js通过

executeScript

注入该规则

要使

executeScript

在弹出图标未被显式单击的选项卡上工作，URL应该在manifest.json的

“权限”

键中声明

实际上，对于此任务，不需要将数据保存到

chrome.storage.local

让我们使用简单的消息传递

manifest.json，假设内容脚本只应注入

executeScript

：

"permissions": [
    ................
    "*://possibleurl1/*",
    "http://possibleurl2/*",
    "https://possibleurl3/*",
]

删除
```
“内容脚本”
```
部分

添加

executeScript

的权限：

"permissions": [
    ................
    "*://possibleurl1/*",
    "http://possibleurl2/*",
    "https://possibleurl3/*",
]

或使用

”：

确保您拥有“权限”：[“activeTab”]
或[“http://allowed.url/path/*“]
或[”“]
（尽量避免后者，因为后者过于宽松，用户不会喜欢您的扩展可以访问和修改他们访问的所有站点上的数据的警告）
如果内联代码短/简单，请使用code:
参数指定内联代码
使用文件：
参数指定单独的内容脚本文件，否则
确保代码中的最后一个表达式或语句的计算结果为简单的数字/布尔值或字符串值（它将被传递到回调），否则使用JSON.stringify（obj）
DOM元素不能直接序列化；请使用Array.map
或innerHTML
或其他方法仅提取所需的信息
回调将接收一个结果数组，第一个元素对应于主页面，其他元素对应于frames/iframe


问题中的代码有一些问题：
在调用.set
回调之前，选项卡在popup.js中打开（它与所有chrome.
API回调一样是异步的）
内容脚本读取数据但从不使用它，因为没有消息发送到onMessage
listener，因此它的回调永远不会被调用
manifest.json定义内容脚本自动注入规则，popup.js通过executeScript
注入该规则
要使executeScript
在弹出图标未被显式单击的选项卡上工作，URL应该在manifest.json的“权限”
键中声明

实际上，对于此任务，不需要将数据保存到chrome.storage.local


让我们使用简单的消息传递


manifest.json，假设内容脚本只应注入executeScript
：
"permissions": [
    ................
    "*://possibleurl1/*",
    "http://possibleurl2/*",
    "https://possibleurl3/*",
]

删除“内容脚本”
部分
添加executeScript
的权限：
"permissions": [
    ................
    "*://possibleurl1/*",
    "http://possibleurl2/*",
    "https://possibleurl3/*",
]

或使用”：

确保您拥有“权限”：[“activeTab”]
或[“http://allowed.url/path/*“]
或[”“]
（尽量避免后者，因为后者过于宽松，用户不会喜欢您的扩展可以访问和修改他们访问的所有站点上的数据的警告）
如果内联代码短/简单，请使用code:
参数指定内联代码
使用文件：
参数指定单独的内容脚本文件，否则
确保代码中的最后一个表达式或语句的计算结果为简单的数字/布尔值或字符串值（它将被传递到回调），否则使用JSON.stringify（obj）
DOM元素不能直接序列化；使用Array.map
或innerHTML
或其他方法仅提取所需信息
回调将接收一个结果数组，第一个元素对应于主页面，其他元素对应于frames/iframe


您好，我用我所有的代码编辑了任务。您不需要chrome.storage.local
将所需数据传递给内容脚本。我可以通过sendMessage
向您展示一种更简单的方法，您觉得可以吗？@wOxxOm当然可以，谢谢。我还需要将X变量发送到新窗口…您好，我用所有代码编辑了任务。您不需要chrome.storage.local
将所需数据传递到内容脚本。我可以通过sendMessage
向您展示一种更简单的方法，您觉得可以吗？@wOxxOm当然可以，谢谢。我还需要发送X变量到新窗口…非常感谢！！工作完美！！！但我还有最后一个问题。如何将此脚本和从“实际选项卡”中选择数据相结合？感谢您的提示。我将尝试将此应用于我的数组，但仍然收到错误：Uncaught E
chrome.runtime.onMessage.addListener(function(msg, sender, sendResponse) {
    if (msg.action == "article") {
        // make a local copy because msg will be garbage-collected
        var article = msg.data; 
        document.addEventListener("DOMContentLoaded", function() {
            pasteData(article);
        });
    }
});

function pasteData(article) {
    document.getElementById('data_name').value = article.articleTitle;
    document.getElementById('data_perex').value = article.articlePerex;
    document.getElementById('data_source').value = article.articleAuthor;
    document.getElementById('data_url').value = article.articleUrl;
    document.getElementById('data_valid_from').value = article.articleDate;
}

chrome.tabs.executeScript({code:" \
    JSON.stringify( \
        [].map.call(document.querySelectorAll('.article'), function(article) { \
            return { \
                title: article.querySelector('.title').textContent, \
                url: article.querySelector('a').href \
            }; \
        }) \
    )"
}, function(results) {
    var actualData = JSON.parse(results[0]);
    doSomething(actualData);
});