Javascript chrome.tabs.executeScript（）格式问题_Javascript_Jquery_Google Chrome Extension

Javascript chrome.tabs.executeScript（）格式问题

javascript jquery google-chrome-extension

Javascript chrome.tabs.executeScript（）格式问题,javascript,jquery,google-chrome-extension,Javascript,Jquery,Google Chrome Extension,我正在尝试更改网页上所有元素的字体颜色。我很难将这个for循环添加到代码中：在executeScript（）函数内部。我哪里出错了 popup.js function main() { $("p").click(function () { var color = $(this).text(); chrome.tabs.executeScript({ code: 'var el = document.getElementByTagName(

我正在尝试更改网页上所有元素的字体颜色。我很难将这个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);

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>


浏览器操作弹出窗口
p{字体大小：20px；边框：黑色实心1px；文本对齐：居中；填充：2px；}
a、 红色：链接{文本装饰：无；颜色：红色；}
a、 蓝色：链接{文本装饰：无；颜色：蓝色；}
a、 黑色：链接{文本装饰：无；颜色：黑色；}
div.colors{float:left；}
div.font{float:right；}



喜剧演员
卡利布里
重置

您缺少

的第一个参数。executeScript

document.getElementByTagName（）

在

元素之后缺少“s”
<代码>颜色

未在

处定义。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);
  }
});

请参阅扩展名中的

使用

.executeScript

。明白你的意思吗？上面的代码在我的扩展名中。在

document.getElementByTagName

处缺少

“s”

；也就是说，

document.getElementsByTagName

没错。你知道为什么这仍然不会改变屏幕上文本的颜色吗？如果我加入一些if语句，它可以处理一些文本，但对于上面的格式根本不起作用

console.log（jQuery（）.jQuery）

在

popup.js中log atconsole
？您能否在问题中包含manifest.json
？另外，您没有将color
变量传递给.executeScript
的code
属性，而是传递字符串“color”
；e、 例如，code:'var el=document.getElementByTagName（“*”）；对于（var i=0；i
`
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);
  }
});

<!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>

{
  "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
}