javascript - 将 content_script 注入(inject)新打开的窗口

Question

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

1. 触发按钮点击事件。
2. 打开一个新的弹窗(由网站A打开)。
3. 在打开的窗口中填写表格。
4. 点击提交按钮。

目前，我的扩展程序正在为我想要自动化的特定网站使用 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

您可以通过多种方式解决此问题，但以我的拙见，您并不真的需要消息。如果你想在点击页面 Action 时执行内容脚本，那么不要在manifest.json中添加，而是将其拆分成两个不同的文件，一个用于点击按钮，一个用于点击按钮填写并发送表单，然后在需要时使用 chrome.tabs.executeScript 以编程方式注入(inject)它们。

工作流程如下:

1. 页面操作被点击。
2. content_click_btn.js 在页面中加载并点击按钮。
3. 弹出窗口打开。
4. content_fill_form.js 被注入(inject)弹出窗口。
5. 表格已填写并提交。

你的代码会变成这样:

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() ]
        }]);
    });
});

注意:自 2021 年 1 月起，使用 chrome.action而不是 chrome.pageAction 和 chrome.scripting.executeScript()而不是 chrome.tabs.executeScript()。

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，您可以将它留在 list 中的 "content_scripts" 字段中。