如何讓 Chrome 擴展按鈕與注入的 js 通信？

Question

我有一個 chrome 擴展，可以將 js 文件注入網頁。 在瀏覽器中單擊時還會打開一個彈出窗口。 在彈出窗口中，有一個按鈕可以更改 js 文件中的變量。 但是注入的文件通常無法與擴展名的其余部分通信。 我如何改變這個？

我對 chrome 擴展還是有點陌生，謝謝你的幫助。

編輯：這是我到目前為止

清單文件：

     {
    "manifest_version": 2,
    "name": "Minds Color Extension",
    "version": "1",
"content_scripts": [
    {
      "matches": ["https://www.minds.com/*"], 
      "js": ["injectedjs.js"],
      "css" : ["injectedcss.css"]
    }
],
        "browser_action": {

          "default_icon": { 
            "19": "icon.png",
            "38": "icon.png"
          },
          "default_title": "Minds Notification page",
          "default_popup": "popup.html"

        }

      }

彈窗.html

<!--
<!doctype html>
 This page is shown when the extension button is clicked, because the
 "browser_action" field in manifest.json contains the "default_popup" key with
 value "popup.html".
 -->
<html>
  <head>
    <title>Minds Theme Extension</title>
    <style>
html, body {
margin:0;
padding:10;
width: 250px;
}
   #blue {
    background-color: #337dff;
}
   #orange {
    background-color: #ff5733;
}
   #dark {
    background-color: #4a505b;
}
    button {
    border: none;
    color: white;
    padding: 10px 27px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}
#footer {
position: fixed;
bottom: 0;
}
    </style>

    <!--
      - JavaScript and HTML must be in separate files: see our Content Security
      - Policy documentation[1] for details and explanation.
      -
      - [1]: https://developer.chrome.com/extensions/contentSecurityPolicy
     -->
    <script src="injectedjs.js"></script>
  </head>
  <body>
    <div id="status">
<h2> Pick a theme: </h2>
<a href="blue.html"><button type="button" id="blue" onclick="activeBlue(); run();">Blue</button></a>
<a href="orange.html"><button type="button" id="orange" onclick="activeOrange(); run();">Orange</button></a> 
<a href="dark.html"><button type="button" id="dark" onclick="activeDark(); run();">Dark</button></a>
<br />
<div id="footer">
<font size="1"> <a href="mailto:?Subject=Minds%20Support" target="_top">Contact us</a></font>
</div>
</div>
</body>
</html>

注入的js.js

// Var block
var blue = 0;
var orange = 0;
var dark = 0;

// Activation block
function activeBlue() {
blue = 1;
}
function activeOrange() {
orange = 1;
}
function activeDark() {
dark = 1;
}

// Resets var block
function reset() {
blue = 0;
orange = 0;
dark = 0;
}

//Changes Minds css (Runs theme)
function run() {
if (blue == 1) {
    // Runs code that will change minds to blue. 
document.getElementById("mdl-color--white").className = "mdl-color--blue";
} 
if (orange == 1) {
    // Runs code that will change minds to orange
document.getElementById("mdl-color--white").className = "mdl-color--orange";
} 
if (dark == 1) {
    // Runs code that will change minds to dark
document.getElementById("mdl-color--white").className = "mdl-color--grey";

} 
}

Injectedcss.css 中沒有任何內容。 如果你需要像dark.html這樣的其他文件，我可以給你，但我不明白你為什么需要它們。

Answer 1

需要理解的重要事情是注入的腳本與網頁交互，但與彈出窗口（或背景）中發生的事情是分開的。 因此，當您將 inject.js 列為內容腳本並由 popup.html 加載時，它們實際上最終會成為兩個單獨的文件。

所以第一步是創建一個 popup.js。 它需要附加點擊偵聽器（“onclick”算作沒有將 javascript 和 html 分開）並使用消息傳遞來告訴內容腳本要做什么。 （我也稍微鞏固了你的邏輯。）

["blue","orange","grey"].forEach(addListenerFor);

function addListenerFor(color) {
  document.getElementById(color)
    .addEventListener(click,turnPage.bind(undefined,color);
}

function turnPage(color) {
  chrome.tabs.query({"active": true, "currentWindow": true}, function(tabs) {
    chrome.tabs.sendMessage(tabs[0].id, {"newClass": "mdl-color--"+color});
  });
}

在內容腳本中，我們需要監聽消息並采取適當的行動：

chrome.runtime.onMessage.addListener(changeClass);

function changeClass(message) {
  reset();
  if ( message.newClass ) {
    document.getElementById("mdl-color--white").className = message.newClass;
  }
}

最后的一些想法：

由於您的擴展程序針對特定頁面，因此您應該使用頁面操作而不是瀏覽器操作。 差異曾經更重要（您的擴展根本不會出現）。 如今，除非您在正確的頁面上，否則您將無法打開彈出窗口。
如果您的injected.css 真的是空的，那么您可以簡單地從manifest.conent_scripts條目中刪除css鍵。
為了讓getElementById在 popup.js 中工作，您需要在元素出現后運行腳本。 您可以將所有內容放入onload調用中，但在body關閉之前將script標記移動到可能更容易。

如何讓 Chrome 擴展按鈕與注入的 js 通信？

問題描述

1 個解決方案

解決方案1
2 已采納 2016-06-04 19:28:47

如何讓 Chrome 擴展按鈕與注入的 js 通信？

問題描述

1 個解決方案

解決方案1 2 已采納 2016-06-04 19:28:47

解決方案1
2 已采納 2016-06-04 19:28:47