个人中心
gpt4 book ai didi

javascript - 使用浏览器操作 Chrome 扩展程序

转载 作者：行者123 更新时间：2023-12-03 08:44:59 25 4
gpt4 key购买 nike

我正在创建一个 Chrome 扩展程序，它可以“清理”Google 搜索结果中的链接，然后使用户能够查看搜索结果中的所有链接，并让他们从列表中复制任何网址。

例如。

list 文件。

{
   "content_scripts":[
      {
         "all_frames":true,
         "js":[
            "js/jquery.min.js",
            "js/clean.js"
         ],
         "matches":[
            "http://www.google.com.au/*",
            "https://www.google.com.au/*"
         ],
         "run_at":"document_start"
      }
   ],
   "description":"Cleans URLs and allows you to copy them to the clipboard.",
   "icons":{
      "16":"img/icon-16.png",
      "32":"img/icon-32.png",
      "64":"img/icon-64.png",
      "128":"img/icon-128.png",
      "256":"img/icon-256.png"
   },
   "browser_action":{
      "default_icon":{
         "16":"img/icon-16.png"
      },
      "default_title":"Clean Google",
      "default_popup":"html/index.html"
   },
   "manifest_version":2,
   "minimum_chrome_version":"40",
   "name":"Clean Google",
   "version":"1.0",
   "version_name":"1.0"
}

HTML 文件。

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/jquery-ui.min.js" type="text/javascript"></script>
    <script src="js/clipboard.min.js" type="text/javascript"></script>
    <script src="js/urls.js" type="text/javascript"></script>
</head>

<body>
    <form>
        <table>
            <h3>Current Page</h3>
            <h4 class="tab"></h4>
            <tr>
                <td class="name">URL :</td>
                <td>
                    <p class="url">sample url</p>
                </td>
                <td>
                    <input type="button" value="Copy URL" class="copy" data-clipboard-target=".url">
                </td>
            </tr>
        </table>
        </form>
</body>

</html>

urls JS 文件。 (我不知道如何根据有多少链接动态创建元素)

$(document).ready(function() {
    new Clipboard(".copy");
    var a = $("a").attr("href");
    var c = a.length;
    $("h4").text(window.location.href);
    $(".url").text(c);
});

当前扩展的图像。

enter image description here

我希望这可以帮助您了解我想要实现的目标。任何帮助将不胜感激。

谢谢:)

最佳答案

当用户打开弹出窗口时，您需要在当前页面注入(inject)脚本。内容脚本或其他注入(inject)脚本(通过 chrome.tabs.executeScript)可以访问 DOM，并且可以在您的扩展程序内监听和发送消息(background\content-script\popup\optiona-page)。

弹出脚本示例:

chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    // execute script on current tab only
    var tab = tabs[0];
    if(/https?:\/\//.test(tab.url)) // regexp for exec on need pages only
        chrome.tabs.executeScript(tab.id, {file: 'content.js'});            
});

chrome.runtime.onMessage.addListener(function (message, sender) {
    if(message.action == 'get-links') {
        console.log(messages.links);
    }
});

和 content.js:

var links = [];
var a = document.querySelectorAll('a');
for(var i=0; i<a.length; i++) {
    links.push(a[i].getAttribute('href');
}

chrome.runtime.sendMessage({action: 'get-links', links: links});

对于此代码，您必须在 list 中写入权限:“http://*/*”(或白名单)和“tabs”。

关于javascript - 使用浏览器操作 Chrome 扩展程序，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32930001/

25 4 0
文章推荐： javascript - Froala Editor 2 basic init 未捕获类型错误 : undefined is not a function
文章推荐： javascript - 如何在单击按钮后添加新行，html jquery
文章推荐： javascript - (可选)尝试根据环境加载 <script>
文章推荐： javascript - Knockout JS 中未收到任何值
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com