chrome.tabs.executeScript() 格式问题答案

【问题标题】：chrome.tabs.executeScript() formatting issuechrome.tabs.executeScript() 格式问题
【发布时间】：2016-10-04 01:07:00
【问题描述】：

我正在尝试更改网页上所有元素的字体颜色。我很难将这个 for 循环添加到代码中：在 executeScript() 函数中。我哪里做错了？

popup.js

function main() {

    $("p").click(function () {
        var color = $(this).text();
        chrome.tabs.executeScript({
        code: 'var el = document.getElementByTagName("*"); for (var i=0; i < el.length; i++) { el[i].style.color = color;}'
        });
    });
}
$(document).ready(main);

manifest.json

// metadata file containing basic properties

{
  "name": "Font Color Changer",
  "description": "Change the color of the current page's font.",
  "version": "1.0",
  "permissions": [
    "activeTab"
  ],
  "background": {
    "scripts": ["popup.js"],
    "persistent": false
  },
  "browser_action": {
    "default_title": "Change the font color!",
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "manifest_version": 2
}

popup.html

<!DOCTYPE html>
<html>
    <title>popup for browser action</title>
    <head>
    <script src="jquery-3.1.1.min.js"></script>
    <script type ="text/javascript" src="popup.js"></script>

    <style>
        p {font-size: 20px; border: black solid 1px; text-align: center; padding: 2px;}
        a.red:link {text-decoration: none; color: red;}
        a.blue:link {text-decoration: none; color: blue;}
        a.black:link {text-decoration: none; color: black;}
        div.colors {float: left;}
        div.font {float:right;}
    </style>
</head>
<body>
<!-- parent div for the three different options -->
<div style = "width: 175px;">
    <!-- div for color selectors -->
    <div class = "colors">
        <p><a class = "red" href="#">red</a></p>
        <p><a class = "blue" href="#">blue</a></p>
        <p><a class = "black" href="#">black</a></p>
    </div>
    <!-- div for font-family selectors -->
    <div class = "font">
        <p>Comic Sans</p>
        <p>Calibri</p>
        <p>Reset</p>
    </div>
</div>
</body>

【问题讨论】：

在扩展中使用.executeScript。见Chrome Extension Trigger Keydown JS
这是什么意思？上面的代码在我的扩展中。
在document.getElementByTagName 处缺少"s"；即document.getElementsByTagName
确实如此。知道为什么这仍然不会改变屏幕上文本的颜色吗？如果我输入一些 if 语句，它适用于某些文本，但它根本不适用于上述格式
console.log(jQuery().jquery) 在popup.js 中登录console 是什么意思？您可以在问题中包含manifest.json 吗？此外，您还没有将color 变量传递给.executeScript 的code 属性，而是将字符串"color"；例如，code: 'var el = document.getElementByTagName("*"); for (var i=0; i < el.length; i++) { el[i].style.color = ' + color + ';}'`

标签： javascript jquery google-chrome-extension

【解决方案1】：

您缺少.executeScript 的第一个参数； document.getElementByTagName() 在Element 之后缺少"s"； color 未在 .executeScript 调用中定义； jQuery 不需要返回预期的结果。

将popup.js调整为

function click(e) {
  chrome.tabs.executeScript(null, {
    code: "var el = document.getElementsByTagName('*'); " 
          + "for (var i=0; i < el.length; i++) { el[i].style.color ='" 
          + e.target.textContent 
          + "'}"
  });
  window.close();
}

document.addEventListener("DOMContentLoaded", function(e) {
  var p = document.querySelectorAll('p');
  for (var i = 0; i < p.length; i++) {
    p[i].addEventListener('click', click);
  }
});

popup.html 到

<!DOCTYPE html>
<html>
    <title>popup for browser action</title>
    <head>
    <style>
        p {font-size: 20px; border: black solid 1px; text-align: center; padding: 2px;}
        a.red:link {text-decoration: none; color: red;}
        a.blue:link {text-decoration: none; color: blue;}
        a.black:link {text-decoration: none; color: black;}
        div.colors {float: left;}
        div.font {float:right;}
    </style>

</head>
<body>
<!-- parent div for the three different options -->
<div style = "width: 175px;">
    <!-- div for color selectors -->
    <div class = "colors">
        <p><a class="red" href="#">red</a></p>
        <p><a class="blue" href="#">blue</a></p>
        <p><a class="black" href="#">black</a></p>
    </div>
    <!-- div for font-family selectors -->
    <div class = "font">
        <p>Comic Sans</p>
        <p>Calibri</p>
        <p>Reset</p>
    </div>
</div>
    <script src="popup.js"></script>
</body>
</html>

manifest.json

{
  "name": "Font Color Changer",
  "description": "Change the color of the current page's font.",
  "version": "1.0",
  "permissions": [
    "tabs", "http://*/*", "https://*/*"
  ],
  "browser_action": {
    "default_title": "Change the font color!",
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "manifest_version": 2
}

见A browser action with a popup that changes the page color

【讨论】：