google-chrome-extension - 如何通过 Google Chrome 扩展程序更改网页内容

Question

我正在编写扩展程序，它将在网页上的英语单词中强调重音。单击弹出窗口上的“搜索”按钮后，我陷入困境，似乎什么也没有发生。

这是场景:

1. 用户双击网页上的单词。
2. 整个单词都已标记。
3. 用户点击 Chrome 浏览器栏上的扩展程序图标。
4. 显示一个弹出窗口。弹出窗口中的输入字段将填入标记的单词。
5. 用户添加了重音。 IE。如果标记的单词是“boundary”，则在弹出窗口的输入字段中将显示:“boudary”。然后用户将输入值修改为:'boudary,bo'(不带引号)。
6. 用户点击弹出窗口中的“搜索”按钮。
7. 页面上“boundary”一词中的字母“bo”带有下划线。

ma​​nifest.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 < node.childNodes.length; ++i) {
        i += innerHighlight(node.childNodes[i], pat, fbgcolor);
      }
    }
    return skip;
  }
  return this.each(function() {
    innerHighlight(this, pat.toUpperCase(), fbgcolor);
  });
};

Answer 1

经过如此多的修改并消除了与非 Chrome 扩展相关的内容后，它才可以正常工作。您可以将您的内容添加到此框架中。

不要在html中添加内联脚本 <button onclick="search(this)" id="search_btn">Search</button>

代码的基本框架:

manifest.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");
}

如果仍然失败，请告诉我。