时间戳

首页 > 解决方案 > 初学者到 chrome 扩展

javascript - 初学者到 chrome 扩展

问题描述

我正在尝试学习 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' });
}

);

谢谢

标签： javascripthtmlgoogle-chrome-extension

解决方案

单击放置在 中的按钮index.html，扩展程序应向内容脚本发送消息 -javascript.js在您的解决方案中。所以内容脚本需要一个事件监听器来监控后台脚本触发的消息。一旦到达，就应该执行相应的方法。

这是解决问题的快速链接，但让我在这里简要描述一下。

  1. 创建一个 js 文件（即index.js）并注入到您的index.html. （老实说，popup.html并且popup.js会比当前的名称-索引更好）。将此代码放入index.js
  2. 在您的内容脚本 -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})
        }
    }
);

在弹出脚本中，您应该向当前/活动选项卡的内容脚本发送一条消息作为这个 answer。

我希望这能帮到您。

谢谢

推荐阅读