2

私の知識ベースを理解していただくために、私はコンピューターエンジニアリングを専攻しており、現在、夏の間、医療会社で仕事をしています。私はほとんど（ほとんどWebコードの経験がありません）ですが、それはほとんど私の仕事が私に望んでいることなので、私はできるだけ早くそれをすべて理解しようとしています。私は学校で多くのC、Verilog、C ++を使用しているので、コンピューターの「言語」は新しいものではありませんが、これらすべてを理解するのに苦労しています。

とにかく、私の最初の任務は、Asterix電話サーバーにリンクするChromeの拡張機能を構築することでした。Webページで電話番号を見つけてハイパーリンクに変換するだけです。ハイパーリンクはクリックされた電話番号に基づいており、その部分は簡単です。

だから、私はHTML、JS、Ajax、Jquery、DOMなどでW3 Schoolsのものを読んだので、過去3日間でたくさんのことを学びました=）

これは私が作成したものです：

私の場合、「backround.html」が必要なようには見えませんでした。ページが読み込まれたらJSファイルを実行して電話番号を見つけ、リンクに変換するだけだからです。

そこで、1つのマニフェストファイルと、本文で番号を検索してその周りにタグを付けるためのJSファイルを作成しました（現在はwww.google.comにアクセスしています）。

良いニュースは、それが機能しているように見えることです。

悪いニュースは、読み込み中にGmailがフリーズし、hotmailが接続できなくなり、更新して新しいメッセージを表示できなくなることです。

拡張機能を作成しているときに、そのようにWebサイトを「壊す」ことさえできたとは思いませんでした。

私のコードはすべて非常に小さいので、ここに投稿します。

マニフェスト.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;

私は私が得ることができるどんな助けにも感謝しています、私が何かを誤解しているようで、あなたが私が読むことができる何かを知っているなら、それは素晴らしいでしょう、私はたくさんグーグルしてきましたが、私は十分に知らないかもしれません正しい質問をする。

この単純な拡張に取り組むためのより良い方法があれば、私は非常に心を開いています=）

4

1 に答える 1

3

テキストノードを取得するための最良の方法と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/
ここからtreewalkerコードを入手しました。彼のサンプルの問題は、親でinnerHTMLを使用して一致をラップすることです（多くの例がそうします）。これにより、テストページのイベントが強制終了されます。

http://www.the-art-of-web.com/javascript/search-highlight/
テキストノードを適切に分割する方法を示しました。そして、私が知っているすべてのことはこれを行うためのより良い方法ですが、私はTreeWalkerの方法に興味を持っていました。

編集
古いバージョンを実行した場合（下の[編集済み]リンクをクリックして表示）、この新しいバージョンのhtmlで失敗したため、更新しました。どういうわけか、私はそれが2番目の数字をラップしないことを本当に理解していません。この新しいバージョンは、私が見たすべての例のようには機能せず、TreeWalkerを使用するための悪用的な方法のようです...しかし、それは機能します！

于 2012-07-28T20:51:56.810 に答える