Question

点击Chrome扩展程序图标时，我正在尝试打开iFrame侧边栏。我收到来自background.js的警报，但没有得到content.js检测到的点击。没有警报或iFrame打开。

我以为我已经遵循了答案here和here，但无法正常工作

{
    "manifest_version": 2,
    "name": "Treasure Roller",
    "version": "1.0",
    "description": "Roll for Treasure!",
    "icons": {
        "128": "images/icon128.png",
        "48": "images/icon48.png",
        "16": "images/icon16.png"
    },
    "browser_action": {
        "default_icon": "images/icon16.png"

    },
    "background": {
        "persistent": true,
        "scripts": [
            "jquery-3.3.1.min.js",
            "background.js"
        ]
    },
    "content_scripts" : [
        {
          "matches" : ["<all_urls>", "http://*/*", "https://*/*"],
          "css" : ["content.css"],
          "js" : ["content.js"]
        }
      ],
    "permissions": [
        "activeTab"
    ],
    "web_accessible_resources": [
        "images/*",
        "sidebar.html"
    ]
}

background.js

chrome.browserAction.onClicked.addListener(sendfunc);
function sendfunc(tab){
msg={txtt:"execute"};
chrome.tabs.sendMessage(tab.id,msg);
alert('working?');
}

content.js

chrome.runtime.onMessage.addListener(recievefunc);

function receivefunc(mssg,sender,sendResponse){
if(mssg.txtt==="execute"){
  var iframe = document.createElement('iframe');
  iframe.src = chrome.extension.getURL("sidebar.html");
  iframe.frameBorder = 0;
  document.body.appendChild(iframe);
  alert('yes works');
}
}

sidebar.html

<!DOCTYPE <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Treasure Roller</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="style.css" />
    <script src="jquery-3.3.1.min.js"></script>
    <script src="sidebar.js"></script>
</head>
<body id="body">
  <div id="sidebar">
    <h1>Treasure Roller</h1>
    <div id="size-container">
      <input type="radio" id="individual" name="size" value="individual">
      <label for="individual">Individual</label>

      <input type="radio" id="hoard" name="size" value="hoard" checked>
      <label for="hoard">Hoard</label>
    </div>

    <div id="challenge-container">
      <input type="radio" id="0-4" name="challenge" value="0-4">
      <label for="0-4">0-4</label>

      <input type="radio" id="5-10" name="challenge" value="5-10">
      <label for="5-10">5-10</label>

      <input type="radio" id="11-16" name="challenge" value="11-16" checked>
      <label for="11-16">11-16</label>

      <input type="radio" id="17+" name="challenge" value="17+">
      <label for="17+">17+</label>
    </div>

    <div id="btn">
      <button id="roll">Roll!</button>
    </div>

    <div id="coin-container">
      <div id="cp"></div>
      <div id="sp"></div>
      <div id="ep"></div>
      <div id="gp"></div>
      <div id="pp"></div>
    </div>

    <div id="objects-container">
      <div id="objects-title"></div>
    </div>

    <div id="magic-container">
        <div id="magic-title">Magic Items</div>
    </div>

  </div>
</body>
</html>

Answer 1

对于任何看到此内容的人来说，here是一个很好的答案，它对我有用。

单击Chrome扩展程序图标时打开iFrame

1 个答案: