Question

我正在尝试构建一个Chrome扩展程序，以自动从我们现在的公司服务系统中截取屏幕截图。用户将输入一个以逗号分隔的变更机票号码字符串，该扩展名将一次打开一个URL。每个页面都需要注入脚本（以更改页面中的选定标签）和截图。然后，代码将移至数组中的下一个变更机票编号并重复该过程。

我对JavaScript尤其是Chrome扩展编程非常陌生。我了解此问题的核心是在循环内调用异步函数。我认为代码所困扰的另一个领域是不同组件（事件js，背景js和内容js）之间的消息传递。到目前为止，这是我整理的代码：

manifest.json
{
/*removed for brevity */
        "default_icon": "icon.png",
        "default_popup": "popup.html"
    },
    "background":{
            "scripts":["background_script.js"],
            "persistent":false
    },
    "content_scripts":[
        {
            "matches":["https://removed/*"],
            "js":["content.js"]
        }
    ],
    "web_accessible_resources": ["tab_three.js"],
/* Permissions removed for brevity */
}

event.js

var port = chrome.extension.connect({name: "urlport"});

function openWindow(messageToSend) {
    return new Promise((resolve, reject) => {
        port.postMessage(JSON.stringify(messageToSend));
        port.onMessage.addListener(function(msg){
        while (msg!="Ok"){}
        resolve();      
    });
    });
};

async function processArray(array) {
    for (const a of array) {
        await openWindow(a);
    }
};

window.onload=function(){
    var button=document.getElementById('save');
    var inputValue=document.getElementById('ticketnum');
    button.onclick=function(){
        var array=inputValue.value.split(',');
        processArray (array);   
        }
    };

background_script.js
/*savescreenshot removed for brevity*/

chrome.extension.onConnect.addListener(function(port) {
  port.onMessage.addListener(function(msg) {
      var msg = JSON.parse(msg);
      var counter = 0;
    chrome.tabs.update(null, 
    {url: "https://removed.com/text_search_exact_match.do?sysparm_search="+msg, active: true},
    function (tab){
        chrome.tabs.onUpdated.addListener(function listener (tabId, info){
            if (info.status==='complete' && tabId === tab.id /*&& counter ==0*/){
                counter ++;
                chrome.tabs.sendMessage(tab.id, {message: 'update_tab_three'}, (response)=> {
                    chrome.tabs.captureVisibleTab(null, {
                    format:"png"},
                    function (data) {
                        screenshot.data=data;
                        screenshot.saveScreenshot(msg);
                    });
                });

            }
            return true;
        });
    }
    );
    port.postMessage("Ok");
  });
  return true;
});

content.js

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if (request.message == 'update_tab_three') {
        var s = document.createElement('script');
        s.src = chrome.extension.getURL('tab_three.js');
        (document.head||document.documentElement).appendChild(s);
        s.onload = function() {
            s.parentNode.removeChild(s);
        };
    }
  return true;
});

该代码适用于单个票证条目。但是，当输入两个（例如CHG123，CHG456）时，其行为会有所不同。通常，它将为CHG456保存两次屏幕截图，第一次是在屏幕完全加载之前使用名称CHG123，然后是在注入脚本并选择选项卡之后使用CHG456。我想要的是将CHG123加载到屏幕上，注入脚本，然后插入屏幕截图，然后将CHG456加载到屏幕上，注入脚本，然后插入第二个屏幕截图。我已经转动了一段时间，但不知道下一步该怎么做，因此不胜感激！谢谢。

URL数组-对于每个URL打开页面，注入JS内容，将屏幕截图移至下一个URL

0 个答案: