1

我正在处理弹出窗口、内容脚本和背景脚本的组合。不幸的是，我在其中选择的任何沟通方式都未能达到我想要的结果。

我需要在浏览器菜单中使用图标/弹出窗口开发 webextension。单击后，它会在弹出窗口中打开带有项目的专用菜单。当我单击弹出某个项目时.. 选项卡应该打开，它应该转到某个 URL 登录（通过带有参数的 URL 或 POST）并转到子页面（特定于弹出项目文本）。

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

你们知道这怎么可能吗？最好的一些简短的例子？我只使用了标准的 javascript。

我的第一次尝试：

清单.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);
});

内容.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");
             }
      }
    );
4

1 回答 1

1

您需要一个后台脚本来编排事物。

popup.js用于chrome.runtime.sendMessage()向background.js点击事件发送消息。

在background.js：

  1. chrome.runtime.onMessage()捕捉消息popup.js
  2. chrome.tabs.create()打开登录页面并记住标签 ID；
  3. chrome.webNavigation.onCompleted.addEventListener()检测选项卡是否已加载（您需要一个tabId您记得的事件和frameId === 0）；
  4. chrome.tabs.executeScript()在该选项卡上注入content.js将填写表格并提交；
  5. chrome.webNavigation.onCompleted.addEventListener()再次检测标签是否已加载；
  6. chrome.tabs.update()导航到所需的子页面；
  7. 清理。

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

于 2016-07-20T16:51:48.213 回答