我正在尝试更改网页上所有元素的字体颜色。我很难将这个 for 循环添加到代码中:在 executeScript() 函数中。我哪里出错了？
弹出窗口
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);
list .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
}
弹出窗口
<!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 的第一个参数； 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>
list .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
关于javascript - chrome.tabs.executeScript() 格式问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39842736/