我正在尝试学习 Chrome 扩展，并且正在尝试构建一个简单的扩展来尝试查找网页中是否有表单。
我的代码尽可能简单，以下代码片段是内容脚本 - javascript.js 和弹出页面 - index.html。
function sendMessage() {
chrome.extension.sendMessage({
action: "findurls"
});
}
document.addEventListener('DOMContentLoaded', function () {
var show = document.getElementById('show');
show.addEventListener('click', findValidForms);
});
const findValidForms = () => {
let list = [];
let message = "Available forms are: \n ";
let forms = document.querySelectorAll('form');
if (forms.length > 0) {
for (var i = 0; i < forms.length; i++) {
list.push(forms[i].action);
message += `<a href="${list[i]}">${list[i]}</a><br />`;
}
}
else {
message = "no forms";
}
alert(message);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>testing</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="cgi">
<div class="heading">
<h3 center> Test title </h3>
</div>
<div id='ah!'> </div>
<button id='show'>find forms</button>
<script src="jquery-3.5.0.min.js"></script>
<script type="text/javascript" src="javascript.js"></script>
</body>
</html>manifest:
"manifest_version": 2,
"name": "form",
"version": "1.0",
"description": "find form url ",
"icons": {
"16": "chrome_16.png",
"32": "chrome_32.png"
},
"background": {
"scripts": ["background.js"],
"persistent": false
},
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"js": [
"javascript.js",
"jquery-3.5.0.min.js"
],
"css": [
"style.css"
]
}
],
"browser_action": {
"default_icon": "chrome_16.png",
"default_popup":"index.html",
"default_title": "test"
},
"permissions": [
"activeTab"
]
}
background.js:
chrome.extension.onMessage.addListener(
function(request, sender, sendResponse)
{
if (request.action == "findurls")
chrome.tabs.executeScript({ file: 'test.js' });
}
);
谢谢
最佳答案
单击位于 index.html 中的按钮，扩展程序应向解决方案中的内容脚本 - javascript.js 发送一条消息。因此内容脚本需要一个事件监听器来监视后台脚本触发的消息。一旦到达，就应该执行相应的方法。
这里是the quick link来解决，但让我在这里简单描述一下。
- 创建一个 js 文件(即
index.js)并注入(inject)到index.html中。 (老实说，popup.html和popup.js会比当前名称 - index 更好)。将此代码放入index.js - 在您的内容脚本 -
index.js中，添加代码以监听从弹出页面脚本 (index.js) 发送的消息，并使用您创建的当前函数的处理程序。 (原始函数名称为Forms)
popup.js
const sendMessage = () => {
chrome.tabs.query(
{
active: true,
currentWindow: true
}, (tabs) => {
chrome.tabs.sendMessage(
tabs[0].id,
{
action: "get-urls"
}, (response) => {
console.log(response)
}
);
}
);
}
document.addEventListener('DOMContentLoaded', function () {
var geturls = document.getElementById('btn-get-urls');
geturls.addEventListener('click', sendMessage);
});content_script.js
const FindAllForms = () => {
let list = [],
message = "Available forms are: \n ",
availableForms = document.querySelectorAll('form');
if (availableForms.length > 0) {
for (var i = 0; i < availableForms.length; i++) {
list.push(availableForms[i].action);
message += "<a href=" + list[i] + ">" + list[i] + "</a>" + "\n";
}
}
else {
message = "no forms";
}
alert(message);
}
chrome.extension.onMessage.addListener(
(request, sender, sendResponse) => {
if (request.action == "get-urls") {
FindAllForms()
sendResponse({'success': true})
}
}
);在弹出脚本中，您应该向当前/事件选项卡的内容脚本 as this answer 发送一条消息.
希望这对您有帮助。
谢谢
关于javascript - chrome 扩展初学者，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62412279/