初學者到 chrome 擴展

Question

我正在嘗試學習 chrome 擴展，我正在嘗試構建一個簡單的擴展來嘗試查找網頁中是否存在 forms。

我的代碼盡可能簡單，以下代碼片段是內容腳本 - 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' });
}

);

謝謝

Answer 1

單擊index.html中的按鈕，擴展程序應向內容腳本發送消息 - javascript.js在您的解決方案中。 所以內容腳本需要一個事件監聽器來監控后台腳本觸發的消息。 一旦到達，就應該執行相應的方法。

這是解決問題的快速鏈接，但讓我在這里簡要描述一下。

創建一個 js 文件（即index.js ）並注入到您的index.html中。 （老實說， popup.html和popup.js會比現在的名字 - index更好） 。 將此代碼放入index.js
在您的內容腳本 - index.js中，添加代碼以偵聽從彈出頁面的腳本 ( index.js ) 發送的消息，並使用您創建的當前 function 處理程序。 （原 function 名稱為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}) } } );

在彈出腳本中，您應該向當前/活動選項卡的內容腳本發送一條消息作為答案。

我希望這能幫到您。

謝謝

初學者到 chrome 擴展

問題描述

1 個解決方案

解決方案1
2 已采納 2020-06-16 16:15:54

初學者到 chrome 擴展

問題描述

1 個解決方案

解決方案1 2 已采納 2020-06-16 16:15:54

解決方案1
2 已采納 2020-06-16 16:15:54