4

ウェブページの英単語のアクセントに下線を引く拡張機能を書いています。ポップアップの [検索] ボタンをクリックしても何も起こらないようです。

シナリオは次のとおりです。

  1. ユーザーが Web ページ上の単語をダブルクリックします。
  2. 単語全体がマークされています。
  3. ユーザーが Chrome ブラウザ バーの拡張機能アイコンをクリックします。
  4. ポップアップが表示されます。ポップアップの入力フィールドには、マークされた単語が入力されます。
  5. ユーザーがアクセントを追加します。すなわち。マークされた単語が「境界」の場合、ポップアップの入力フィールドに「境界」が表示されます。次に、ユーザーは入力値を次のように変更します: 'boudary,bo' (引用符なし)。
  6. ユーザーはポップアップの「検索」ボタンをクリックします。
  7. ページ上の「境界」単語の文字「bo」に下線が引かれています。

マニフェスト.json

{
  "content_scripts": [ {
    "js": [ "jquery.js", "jquery.highlight-4.js", "selection.js" ],
    "matches": [ "\u003Call_urls\u003E" ]
  } ],
  "name": "Mark accent",
  "version": "1.0",
  "manifest_version": 2,
  "options_page": "options.html",
  "description": "Marks accent in english words for selected word on page",
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "icons": {
    "128": "icon.png"
  },
  "permissions": [ "tabs", "http://*/*", "https://*/*", "storage", "file:///*" ]
}

app.js

chrome.tabs.getSelected(null, function(tab) {
  chrome.tabs.sendRequest(tab.id, {method: "getSelection"}, function (response) {
    $("#t1").val(response.data);
    console.log('input t1 value: ' + $("#t1").val(response.data));
  });
});
$("#t1").keypress(function(event) {
  if ( event.which == 13 ) {
    $("#search_btn").click();
  }
});
$("#t1").focus();

function search(that) {
  var token = new String (t1.value);
  chrome.tabs.executeScript(null,
    {code:"$(document.body).highlight('"+token+"','text-decoration:underline')"});
  window.close();
}

selection.js

chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
  if (request.method == "getSelection")
    sendResponse({data: window.getSelection().toString()});
  else
    sendResponse({}); // snub them.
});

popup.html

<style>
body {
overflow: hidden; margin: 5px; padding: 0px; background: black;color: white;
width: 300px; font-family: 'Droid Sans', arial, sans-serif;
}
</style>
Please enter the word to highlight :
<input type="text" id="t1"/>
  <button onclick="search(this)" id="search_btn">Search</button>
  <button onclick="hl_clear(this)" id="clear_btn">Clear all highlights</button>
  <script src="jquery.js"></script>
<script src="jquery.highlight-4.js"></script>
<script src="app.js"></script>

jquery.highlight-4.js

jQuery.fn.highlight = function(pat, fbgcolor) {
  function innerHighlight(node, pat, fbgcolor) {
    var skip = 0;
    var array = pat.split(',');
    var sWord = array[0];
    var accent = array[1];
    if (node.nodeType == 3) {
      var pos = node.data.toUpperCase().indexOf(sWord);
      if (pos >= 0) {
        var middlebit = node.splitText(pos);
        var endbit = middlebit.splitText(sWord.length);
        var pos2 = middlebit.data.toUpperCase().indexOf(accent);
        if (pos2 >= 0) {
          var spannode = document.createElement('span');
          spannode.className = 'highlight';
          fbgcolor += ";padding: 0px; margin: 0px;";
          spannode.setAttribute('style', fbgcolor);
          var middlebit2 = middlebit.splitText(pos2);
          var endbit2 = middlebit2.splitText(accent.length);
          var middleclone2 = middlebit2.cloneNode(true);
          spannode.appendChild(middleclone2);
          middlebit2.parentNode.replaceChild(spannode, middlebit2);
        }
        skip = 1;
      }
    }
    else if (node.nodeType == 1 && node.childNodes && 
             !/(script|style)/i.test(node.tagName)) {
      for (var i = 0; i &lt; node.childNodes.length; ++i) {
        i += innerHighlight(node.childNodes[i], pat, fbgcolor);
      }
    }
    return skip;
  }
  return this.each(function() {
    innerHighlight(this, pat.toUpperCase(), fbgcolor);
  });
};
4

1 に答える 1

1

非常に多くの変更を加えて動作し、Chrome 拡張機能に関連しないコンテンツを削除しました。このスケルトンにコンテンツを追加できます。

HTML にインライン スクリプトを追加しないでください <button onclick="search(this)" id="search_btn">Search</button>

ここに画像の説明を入力

コードの基本的なスケルトン:

マニフェスト.json

{
  "content_scripts": [ {
    "js": [ "jquery.js", "jquery.highlight-4.js", "selection.js" ],
    "matches": [ "<all_urls>" ]
  } ],
  "name": "Mark accent",
  "version": "1.0",
  "manifest_version": 2,
  "description": "Marks accent in english words for selected word on page",
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "icons": {
    "128": "icon.png"
  },
  "permissions": [ "tabs", "<all_urls>" ]
}

app.js

function search(that) {
    console.log("Search is clicked");
  var token = document.getElementById("t1").value;
  console.log(token);
  chrome.tabs.executeScript(null,
    {code:"highlight();"});
  //window.close();
}
window.onload=function (){
    document.getElementById("search_btn").onclick=search;

};

selection.js

chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
  if (request.method == "getSelection")
    sendResponse({data: window.getSelection().toString()});
  else
    sendResponse({}); // snub them.
});

popup.html

<html>
<head>
<style>
body {
overflow: hidden; margin: 5px; padding: 0px; background: black;color: white;
width: 300px; font-family: 'Droid Sans', arial, sans-serif;
}
</style>
  <script src="jquery.js"></script>
<script src="app.js"></script>
<body>
Please enter the word to highlight :
<input type="text" id="t1"/>
  <button id="search_btn">Search</button>
  <button id="">Clear all highlights</button>
</body>
</html>

jquery.highlight-4.js

function highlight(){
    console.log("Highlight is called");
}

それでも失敗する場合はお知らせください。

于 2012-11-27T07:26:31.070 に答える