gpt4 book ai didi

javascript - 初学者到 chrome 扩展

转载 作者:行者123 更新时间:2023-12-04 09:39:05 25 4
gpt4 key购买 nike

我正在尝试学习 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.htmlpopup.js 将优于当前名称 - 索引 )。将此代码输入 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/

    25 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com