个人中心
gpt4 book ai didi

javascript - Chrome扩展，从正文中的关键词建立链接

转载 作者：行者123 更新时间：2023-11-30 18:22:37 24 4
gpt4 key购买 nike

为了让您了解我的知识基础，我是一名计算机工程专业的学生，​​暑假期间我正在一家医疗公司工作。我几乎没有(几乎为零的网络代码经验)，但这主要是我的工作要我做的，所以我一直在努力尽快弄清楚这一切。我在学校使用过很多 C、Verilog 和 C++，所以计算机“语言”并不新鲜，但我很难完全理解这些东西。

无论如何，我的第一个任务是为 Chrome 构建一个扩展，链接到我们的 Asterix 电话服务器。所要做的就是在网页上找到电话号码并将它们变成超链接，超链接将基于点击的电话号码，这部分很简单。

所以，我阅读了 W3 Schools 上关于 HTML、JS、Ajax、Jquery、DOM 等的东西。所以在过去的 3 天里我学到了很多东西 =)

这是我制作的:

在我的案例中，我似乎不需要“backround.html”，因为我需要做的就是在页面加载后运行一个 JS 文件以查找电话号码并将它们转换为链接。

所以我写了一个 list 文件和一个 JS 文件来搜索正文中的数字并在其周围放置一个标签，(目前正在访问 www.google.com)

好消息是它似乎有效。

坏消息是这会使 Gmail 在加载时卡住，并使 hotmail 无法连接并且无法更新和查看新邮件。

我认为您在进行扩展时甚至无法以这种方式“破坏”网站。

我所有的代码都非常小，所以我只是把它贴在这里。

list .json

   {
  "name": "Typenex Hyperlink-Dialer",

  "version": "1.0",
  "description": "This is a custom built extension for Typenex. This extension identifies phone numbers and allows the user to click the number to initiate a phonecall.",
  "permissions": [
    "tabs", "http://*/*", "https://*/*"
  ],

  "browser_action": {
      "default_title": "Typenex Hyperlink-Dialer",

      "default_icon": "typenex_logo.png"
  },

  "content_scripts" : [
    {
      "matches" : ["http://*/*", "https://*/*"],
      "js" : ["typenex_contentscript.js"],
      "run_at" : "document_idle",
      "all_frames" : false
    }
  ],

  "manifest_version": 2
}

typenex_contentscript.js

var arrayOfNumbers = [];
alert("hi");
var regex =  /\d*[/-]*[0-9][0-9][0-9][/ -]*[0-9][0-9][0-9][/ -]*[0-9][0-9][0-9][0-9][ ]*/g;
newBody = document.body.innerHTML;
var i = 0;
do
{
    temp = regex.exec(newBody);
    if (temp != null)
        arrayOfNumbers[i] = temp;
    i++
}
while (temp)
for (var i = 0; i < arrayOfNumbers.length; i++)
{
    newBody = newBody.replace(arrayOfNumbers[i], "<a href='http://www.google.com'>" + arrayOfNumbers[i] + "</a>");
}
document.body.innerHTML = newBody;

我很感激我能得到的任何帮助，如果我似乎误解了什么，而你知道我能读到的东西可以帮助那会很棒，我已经谷歌了很多，但我可能还不够了解甚至问正确的问题。

如果你们有更好的方法来处理这个简单的扩展，我将非常开放 =)

最佳答案

我曾多次想知道获取文本节点的最佳方式是什么，并打算查看 TreeWalking，所以这次我做了。以下是我制作的测试页，我不能说这是否是最好的方法，但可以满足您的需求。

treewalker.html 

<html>
  <head>
    <style>
    </style>
    <script src="treewalker.js"></script>
  </head>
  <body>
    <div>This is a div</div>
    <div><div id='testevent'>Test event</div>This is a div 000-000-0000</div>
    <div>This is a div 000-000-0000</div>
     <div>This is<a href='sf'>bleh 000-000-0000 a div</a></div>
  </body>
</html>

treewalker.js 

function onLoad() {

  document.querySelector('#testevent').onclick = function() {
    alert('clicked')
  };

  // Here starts the bit for your content script
  var re = /(\d*[/-]*[0-9][0-9][0-9][/ -]*[0-9][0-9][0-9][/ -]*[0-9][0-9][0-9][0-9][ ]*)/g;
  var regs;

  var walker = document.createTreeWalker(
  document.body, NodeFilter.SHOW_TEXT, function(node) {
    if((regs = re.exec(node.textContent))) {
      // make sure the text nodes parent doesnt have an attribute we add to know its allready been highlighted
      if(!node.parentNode.classList.contains('highlighted_text')) {
        var match = document.createElement('A');
        match.appendChild(document.createTextNode(regs[0]));
        match.href = 'http://www.google.com';

        // add an attribute so we know this element is one we added
        // Im using a class so you can target it with css easily
        match.classList.add('highlighted_text');

        var after = node.splitText(regs.index);
        after.nodeValue = after.nodeValue.substring(regs[0].length);
        node.parentNode.insertBefore(match, after);
      }
    }
    return NodeFilter.FILTER_SKIP;
  }, false);

  // Make the walker step through the nodes
  walker.nextNode();

  // and it ends here
}

(function() {
  document.addEventListener("DOMContentLoaded", onLoad);
})();

代码被盗

http://paul.kinlan.me/dom-treewalker/
那就是我从中获得树行者代码的地方。他的示例的问题是它在父级上使用 innerHTML 包装匹配项(很多示例都这样做)，这会终止测试页面中的事件。

http://www.the-art-of-web.com/javascript/search-highlight/
显示了如何正确拆分文本节点。据我所知，这是一种更好的方法，但我对 TreeWalker 方法很感兴趣。

编辑
我刚刚更新了它，因为如果您运行旧版本(单击下面的已编辑链接以查看它)，则在此新版本中的 html 上会失败。出于某种原因，我真的不明白它不会包装第二个数字。这个新版本并不像我看到的所有示例那样工作，而且似乎是一种滥用 TreeWalker 的方式……但它确实有效!

关于javascript - Chrome扩展，从正文中的关键词建立链接，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11696661/

24 4 0
文章推荐： javascript - HTML5 中的高级音频操作
文章推荐： javascript - Backbone Event 触发不同 View 之间的协调
文章推荐： 用于隐藏/显示 div 的 Javascript if/else 语句
文章推荐： javascript - 从 JavaScript 函数返回值
行者123
个人简介

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

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