Question

我正在开发个人使用的扩展程序，它只会自动在网站A上重复某些操作。这基本上是我想要使用Chrome扩展程序自动化的流程：

触发按钮点击事件。
打开一个新的弹出窗口（由网站A打开）。
将表单填入打开的窗口。
点击提交按钮。

目前，我的扩展程序正在使用Chrome的pageAction作为我想要自动化的特定网站。

manifest.json

{
  "manifest_version": 2,

  "name": "Automater",  
  "version": "0.0.1",

  "page_action": {
    "default_title": "Click here!",
    "default_icon": "icon.png"
  },
  "content_scripts": [
    {
      "matches": [
        "https://www.website.com/*"
      ],
      "js": ["jquery-3.2.1.min.js", "content.js"],
      "run_at": "document_end"
    }
  ],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "permissions": [
    "activeTab",
    "tabs",
    "declarativeContent",
    "storage"
  ]
}

background.js

chrome.pageAction.onClicked.addListener(function(tab) {
  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    var activeTab = tabs[0];
    chrome.tabs.sendMessage(
      activeTab.id,
      { 'message': 'click_btn' }
    );
  });
});

chrome.runtime.onInstalled.addListener(function() {
  chrome.declarativeContent.onPageChanged.removeRules(
      undefined, function() {
    chrome.declarativeContent.onPageChanged.addRules([
      {
        conditions: [
          new chrome.declarativeContent.PageStateMatcher({
            pageUrl: {
              urlContains: 'www.website.com',
              schemes: ['https']
            },
          })
        ],
        actions: [ new chrome.declarativeContent.ShowPageAction() ]
      }
    ]);
  });
});

chrome.windows.onCreated.addListener(function(newWindow) {
  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    var activeTab = tabs[0];
    chrome.tabs.sendMessage(
      activeTab.id,
      { 'message': 'fill_form' }
    );
  });
});

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if( request.message === 'btn_clicked' ) {
      citationsSize = request.citationsSize;
    }
  }
);

content.js

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    switch(request.message) {
      case 'click_btn':
        $("#btn_id").click();

        chrome.runtime.sendMessage({
          "message": 'btn_clicked'          
        });
        break;
      case 'fill_form':
        console.log('start filling');        
    };
  }
);

我的问题

我在网站上。点击扩展图标后，$("#btn_id").click();正常工作，并打开一个新窗口作为弹出窗口（此弹出窗口由我当前正在访问的网站打开）。我使用chrome.windows.onCreated来抓住新打开的窗口，但是，从这里，我无法向新窗口的内容脚本发送消息fill_form。

如何在新打开的弹出窗口中执行脚本？

Answer 1

你可以通过多种方式解决这个问题，但在我看来，你并不真正需要消息。如果要在单击页面操作时执行内容脚本，请不要将其添加到manifest.json中，而是将其分成两个不同的文件，一个用于单击按钮，另一个用于填写和发送表单，然后在需要时使用chrome.tabs.executeScript以编程方式注入它们。

工作流程如下：

点击了网页操作。
content_click_btn.js已加载到页面中，然后点击按钮。
弹出窗口已打开。
content_fill_form.js将在弹出窗口中注入。
填写并提交表格。

您的代码会变成这样：

<强> background.js ：

chrome.pageAction.onClicked.addListener(function(tab) {
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
        chrome.tabs.executeScript(tabs[0].id, {file: 'content_click_btn.js', runAt: 'document_end'});
    });
});

chrome.runtime.onInstalled.addListener(function() {
    chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
        chrome.declarativeContent.onPageChanged.addRules([{
            conditions: [
                new chrome.declarativeContent.PageStateMatcher({
                    pageUrl: {
                        urlContains: 'www.website.com',
                        schemes: ['https']
                    },
                })
            ],

            actions: [ new chrome.declarativeContent.ShowPageAction() ]
        }]);
    });
});

<强> content_click_btn.js ：

function listener(newWindow) {
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
        if (tabs[0].url.includes('http://www.website.com')
            chrome.tabs.executeScript(tabs[0].id, {file: 'content_fill_form.js', runAt: 'document_end'});
    });

    chrome.windows.onCreated.removeListener(listener);
}

chrome.windows.onCreated.addListener(listener);
document.getElementById('btn_id').click();

<强> content_fill_form.js ：

console.log('Filling the form...');
// Do something to fill and send the form.

此外，您实际上并不需要它，但如果您想使用jQuery，则可以将其保留在清单中的"content_scripts"字段中。

将content_script注入新打开的窗口

我的问题

1 个答案: