Google chrome extension 如何从Google Chrome扩展更改网页内容

我写的扩展将强调在网页上的英语单词的口音。 我在点击弹出窗口上的“搜索”按钮后卡住了，似乎什么也没发生

以下是场景：

用户双击网页上的单词

整个单词都被标记了

用户单击chrome浏览器栏上的扩展图标

将显示一个弹出窗口。弹出窗口中的输入字段用标记的单词填充

用户添加重音。即，如果标记的单词为“边界”，则在弹出窗口的输入字段中将显示“boudary”。然后用户将输入值修改为：“boudary，bo”（不带引号）

用户单击弹出窗口上的“搜索”按钮

第页“边界”字中的字母“bo”加下划线

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

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

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);
  });
};

selection.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();
}

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

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);
  });
};

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>

---

经过如此多的修改和消除了与非chrome扩展相关的内容后，它开始工作。您可以将内容添加到此骨架中

不要在html中添加内联脚本

搜索

代码的基本框架：

manifest.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:///*" ]
}

selection.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();
}

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

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);
  });
};

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>

---

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

我已将问题中的代码添加到框架中，现在可以正常工作：-）谢谢Sudarshan。