任务

Question

我尝试自动执行从易趣页面获取客户数据并将其插入另一页面中的表单的任务。我使用了Imacros，但我并不喜欢它。

Chrome扩展程序是否适用于此类工作？

如果是，dom逻辑应该放在后台页面或内容脚本中？

有人能为我提供一个简单的代码示例吗？

Answer 1

任务

您需要的是Chrome扩展程序，它能够使用内容脚本读取标签内客户页面的DOM内容，然后存储信息并将其发送到另一个标签页。

基本上，您需要：

在客户页面中注入内容脚本
检索数据并将其发送到后台
详细说明数据并将其发送到另一个内容脚本，即：
将表单中的数据插入另一页

实现：

因此，首先，您的manifest.json需要获得访问标签和您所创建的网址的权限，以及后台脚本的声明，如下所示：

{
    "manifest_version": 2,

    "name": "Extension name",
    "description": "Your description...",
    "version": "1",

    "permissions": [
        "<all_urls>",
        "tabs"
    ],

    "background": { "scripts": ["background.js"] }
}

现在，按照以下步骤：

向chrome.tabs.onUpdated添加一个监听器以查找客户页面并注入第一个内容脚本，另外找到包含表单的选项卡并注入第二个脚本，全部来自background.js：
```
chrome.tabs.onUpdated.addListener(function(tabID, info, tab) {
    if (~tab.url.indexOf("someWord")) {
        chrome.tabs.executeScript(tabID, {file: "get_data.js"});
        // first script to get data
    }
    if (~tab.url.indexOf("someOtherWord")) {
        chrome.tabs.executeScript(tabID, {file: "use_data.js"});
        // second script to use the data in the form
    }
});
```
好的，现在上面的代码会在页面中注入get_data.js脚本，如果其网址包含"someWord"而use_data.js，如果其网址包含"someOtherWord"（您必须明确替换） “someWord”和“someOtherWord”用正确的单词来标识正确的页面网址。）

现在，在您的get_data.js中，您需要使用background.js检索数据并将其发送到chrome.runtime.sendMessage脚本，如下所示：

var myData = document.getElementById("some-id").textContent;
// just an example

chrome.runtime.sendMessage({messgae: "here is the data", data: myData});

现在你已经发送了数据，所以在background.js内你需要一个监听器来捕捉并详细说明：

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    if (request.message = "here is the data") {
        // elaborate it

        chrome.tabs.query({url: "*://some/page/to/match/*"}, function(tabs) {
            chrome.tabs.sendMessage(tab[0].id, {message: "here is the data", data: request.data});
        });
    }
});

好的，你差不多完成了，现在你需要在第二个内容脚本use_data.js中收听该消息，然后在表单中使用它：

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    if (request.message == "here is the data") {
        // use the data to do something in the page:
        var myData = request.data;
        // for example:
        document.getElementById("input-id").textContent = data;
    }
});

你完成了！

文档

重要：这只是一个例子，我强烈建议您查看文档以完全理解使用的功能和方法，这里有一些有用的链接：

使用chrome扩展的任务自动化

1 个答案:

任务

实现：

现在，按照以下步骤：

文档