Chrome擴展程序，使鏈接從關鍵詞

爲了讓您瞭解我的知識基礎，我是一名計算機工程專業，現在正在一家醫療公司在夏季工作。我幾乎沒有（幾乎爲零的網絡代碼體驗），但這主要是我的工作要我這樣做，所以我一直在盡我所能地把它全部弄清楚。我在學校使用了很多C，Verilog和C++，所以計算機的「語言」並不新鮮，但我很難將這些東西全部弄清楚。Chrome擴展程序，使鏈接從關鍵詞

無論如何，我的第一項任務是構建Chrome的擴展程序，鏈接到我們的Asterix電話服務器。所有必須做的是在網頁上查找電話號碼並將它們變成超鏈接，超鏈接將基於點擊的電話號碼，該部分是微不足道的。

所以，我讀了HTML，JS，阿賈克斯，jQuery的，DOM等..在W3學校的東西，所以在過去3天內我學到了很多東西=）

這是我公司生產的：

在我的情況下，似乎並不需要「backround.html」，因爲我需要做的就是在頁面加載後運行JS文件以查找phonenumbers並將其轉換爲鏈接。

所以我寫了一個清單文件，以及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 
}

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;

我任何幫助我可以得到感激，如果它看起來像我誤解的東西，你知道的東西我可以閱讀，這可能會有幫助，這將是偉大的，我一直在谷歌很多，但我可能不知道甚至提出正確的問題。

我非常開放的態度，如果你們任何人有更好的方法來解決這個簡單的擴展=）

來源

2012-07-27 njfife

只是爲了澄清，它適用於測試網站或gmail和hotmail以外的網站嗎？ – DigTheDoug 2012-07-27 23:12:09

是的，在我的測試網站上它工作正常，但對於像gmail和Hotmail這樣的網站來說，它似乎不起作用，因爲它會使網站無限加載。在Hotmail中，如果我禁用擴展，然後打開一個帶有數字的電子郵件，啓用擴展和刷新，它可以工作，但Hotmail通知我它已經失去與Hotmail服務器的連接。我在所有的Google網站上都遇到了一些問題。 – njfife 2012-07-28 01:15:00

在您的代碼中，您將在最後替換整個innerHTML，不知是否重新創建DOM會迫使它重新建立與舊密鑰或簽名或其他類似的連接。你有沒有試過簡單地更新數字元素本身，而不是重寫整個頁面？ – DigTheDoug 2012-07-28 03:31:11

我不知道什麼是獲得文本節點的最佳途徑幾次，意思是看樹遍歷，所以我這次做了。以下是我所做的測試頁面，我不能說這是最好的方式，但可能適合您的需求。

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/
那我來自哪裏得到了treewalker代碼。他的示例存在的問題是它在父項上使用innerHTML封裝了比賽（很多示例都是這樣），這會在測試頁中殺死事件。

http://www.the-art-of-web.com/javascript/search-highlight/
演示瞭如何正確分割文本節點。據我所知，這是一個更好的方法，但我對TreeWalker的方式感興趣。

編輯
我剛剛更新它，因爲如果運行老版本（點擊下面的鏈接編輯看到它）在這個新版本中失敗的HTML。出於某種原因，我真的不明白它不會包裝第二個號碼。這個新版本無法像我看到的所有例子那樣工作，似乎是使用TreeWalker的濫用方式......但它起作用！

來源

2012-07-28 20:51:56 PAEz

PAEz，我認爲我已經全部解決了這個問題，但是我遇到了很多問題，非常感謝。它看起來像（首先查看你如何處理這個），這正是我需要的。我遇到了無法替換文本的問題，並讓瀏覽器將新標籤視爲DOM的一部分。有趣的東西，這不是我所期望的！ – njfife 2012-08-01 02:34:41

@PAEz如果我想過濾已經更新或替換的節點，例如：如果您的腳本不止一次執行，它會一直替換文本/數字。任何提示避免這種情況？ – 2013-01-08 18:39:41

@NikhilBhandari是的。我們可以在創建節點時添加屬性，然後忽略具有該屬性的任何節點。檢查答案，我爲你更新了源代碼。 – PAEz 2013-01-09 09:06:33

Chrome擴展程序，使鏈接從關鍵詞

回答

相關問題