Question

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

例如。

清单文件。

{
   "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 File。（我不确定如何根据有多少链接动态创建元素）

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

当前扩展的图片。

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

谢谢：）

Answer 1

当用户打开弹出窗口时，您需要在当前页面上注入脚本。内容脚本或其他注入的脚本（通过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});

对于此代码，您必须在清单中写入权限："http://*/*"（或白名单）和"tabs"。

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

1 个答案: