Chrome扩展,从正文中的关键词创建链接
Chrome extension, making a link from key words in the body
为了让你了解我的知识库,我主修计算机工程,今年夏天在一家医疗公司工作。我几乎没有(几乎没有网络代码经验),但这正是我的工作希望我做的,所以我一直在努力尽快解决这一切。我在学校里用过很多C、Verilog和C++,所以计算机"语言"并不新鲜,但我很难弄清楚这些东西。
无论如何,我的第一项任务是为Chrome构建一个扩展,链接到我们的Asterix手机服务器。所要做的就是在网页上找到电话号码,并将其转换为超链接,超链接将基于点击的电话号码,这一部分很琐碎。
因此,我阅读了W3学校关于HTML、JS、Ajax、Jquery、DOM等的内容。。所以在过去的三天里,我学到了很多
这就是我制作的:
在我的情况下,我似乎不需要"backround.html",因为我所需要做的就是在页面加载后运行一个JS文件,以查找电话号码并将其转换为链接。
所以我写了一个清单文件和一个JS文件,在正文中搜索一个数字并在其周围加上一个标签,(目前转到www.google.com)
好消息是它似乎奏效了。
坏消息是,这会使Gmail在加载时冻结,并使hotmail无法连接,无法更新和查看新消息。
我认为你甚至不能在进行扩展时以这种方式"破坏"网站。
我所有的代码都很小,所以我只想把它发布在这里。
manifest.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
}
typenext_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/
展示了如何正确拆分文本节点。据我所知,这是一种更好的方式,但我对特雷沃克的方式很感兴趣。
编辑
我刚刚更新了它,因为如果你在这个新版本的html上运行旧版本(点击下面的编辑链接查看)失败了。出于某种原因,我真的不明白它不会包裹第二个数字。这个新版本并不像我看到的所有例子那样工作,而且似乎是一种滥用TreeWalker的方式。。。但它有效!
- 创建一个类似链接的按钮,并通过Javascript函数打开一个新的弹出窗口
- 为effect Composer创建GodRays效果过程
- 从javascript创建一个列表
- onkeyup无法动态创建多个文本区域
- 如何使用javascript从主svg对象动态创建svg视图框
- 如何访问声音管理器2创建的声音对象
- 我已经创建了一个jquery转盘,并使用if条件来运行和停止转盘
- Kendo:我该如何在树视图中创建一个递归的hieiarchy
- 使用Facebook live API创建实时视频对象时的隐私设置
- 在动态创建的元素上获取对特定选择器的引用
- 如何创建带有插槽的vue js组件预加载程序
- 如何在创建键时引用来自同一对象的键
- 如何创建JSON数组
- 从html创建一个指令,该指令按类名应用函数
- 使用Javascript创建测验页面
- 更改使用Chart.js创建的图表中的轴线颜色
- JavaScript名称空间和对象创建
- JQuery对动态创建的对象进行选择
- 创建带有和不带有JavaScript的Bootstrap下拉菜单
- Chrome扩展,从正文中的关键词创建链接