Webextension 登录特定页面，一键继续子页面

Question

我正在处理弹出窗口、内容脚本和背景脚本的组合。不幸的是，我在他们之间选择的任何交流都未能获得我想要的结果。

我需要在浏览器菜单中使用 icon/popup 开发网络扩展。单击后，它会打开专用菜单，其中包含弹出窗口 window 中的项目。当我点击弹出某些项目时.. 选项卡应该打开并且它应该去某些 URL 登录（通过带参数的 URL 或 POST）并转到子页面（特定于弹出项文本）。

我尝试了弹出窗口和背景脚本之间、背景脚本和内容脚本之间的多种消息传递组合……但它对我没有用。我在请求同步方面也遇到了问题，因为尽管我登录了（通过 windows.open），但我可以执行进一步的子页面来加载。

你们知道这是怎么回事吗？最好的一些简短的例子？我只使用标准 javascript.

我的第一次尝试：

manifest.json

{
  "description": "test",
  "manifest_version": 2,
  "name": "extensiontest",
  "version": "1.0",
  "homepage_url": "https://xxxx.com",
  "icons": {
    "32": "beasts-32.png"
  },


  "applications": {
    "gecko": {
      "id": "testid@sss.com",
      "strict_min_version": "45.0"
    }
  },

  "content_scripts": 
  [
    {
      "matches": ["<all_urls>"],
      "run_at": "document_end",
      "js": ["content.js"]
    }
  ],

"browser_action": 
  {
  "default_icon": "popup.png",
  "default_popup":"popup.html"
  },

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

"permissions": 
  [
    "tabs","storage"
  ]
}

popup.html

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="links.css"/>
</head>
<script src="popup.js"></script>
<body>
    <ul>
    <li><a id="bQuote" href="#">Quote</a></li>
    <li><a id="bSend" href="#">Send</a></li>
    </ul>
</body></html>

popup.js

function goQuote() {

    chrome.tabs.query({currentWindow: true, active: true}, function (tabs){
    var activeTab = tabs[0];
    chrome.tabs.sendMessage(activeTab.id, {"message": "Quote"});
   });

  // Generic Log In link
  window.open("Login-link","targetname");

}

function goSend() {

    chrome.tabs.query({currentWindow: true, active: true}, function (tabs){
    var activeTab = tabs[0];
    chrome.tabs.sendMessage(activeTab.id, {"message": "Send"});
   });

  // Generic Log In link
  window.open("Login-link","targetname");

}


document.addEventListener("DOMContentLoaded", function() {
  document.getElementById("bQuote").addEventListener("click", goQuote);
  document.getElementById("bSend").addEventListener("click", goSend);
});

content.js

chrome.runtime.onMessage.addListener(
      function(request, sender, sendResponse) {
        if( request.message === "Quote" ) {

          // Subpage link with same target name
          window.open("supbpage-link1","targetname");
             }
        if( request.message === "Send" ) {
          // Subpage link with same target name
          window.open("supbpage-link2","targetname");
             }
      }
    );

Answer 1

你需要一个后台脚本来协调事情。

在 popup.js 中使用 chrome.runtime.sendMessage() 将消息发送到 background.js 单击事件。

在background.js中：

chrome.runtime.onMessage() 接收来自 popup.js
chrome.tabs.create() 打开登录页面并记住选项卡 ID;
chrome.webNavigation.onCompleted.addEventListener() 以检测选项卡是否已加载（您需要一个您记得的带有 tabId 和 frameId === 0 的事件）；
chrome.tabs.executeScript() 在该选项卡上注入 content.js 将填写表格并提交；
chrome.webNavigation.onCompleted.addEventListener() 再次检测选项卡是否已加载；
chrome.tabs.update() 导航到所需的子页面；
清理。

请记住，任何时候都可能出错：用户可能会中断页面加载、凭据可能有误、网络连接可能会消失等。:)

Webextension 登录特定页面，一键继续子页面

Webextension to log in to certain page and continue with subpage by one click

javascript

google-chrome-extension

popup

firefox-addon-webextensions