如何更改Google Chrome瀏覽器擴展程序中的網頁內容

Question

我正在編寫擴展程序，它會在網頁上突出顯示英語單詞的重音。 當我點擊彈出窗口上的「搜索」按鈕後，我陷入了困境，似乎沒有任何事情發生。

這裏的情景：

1. 用戶雙擊網頁上的文字。
2. 整個單詞被標記。
3. 用戶在Chrome瀏覽器欄上單擊擴展圖標。
4. 彈出顯示。彈出窗口中的輸入欄填入標記的單詞。
5. 用戶添加口音。 IE瀏覽器。如果標記字是'邊界'，則在彈出框的輸入字段中將顯示：'boudary'。然後用戶將輸入值修改爲：'boudary，bo'（不含引號）。
6. 用戶單擊彈出式菜單上的「搜索」按鈕。
7. 頁面上的「邊界」字中的字母「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(); 
} 

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

這是這麼多的修改後的工作和消除非瀏覽器擴展程序相關的內容。您可以將您的內容添加到此骨架。

不要加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; 

}; 

選擇。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"); 
} 

讓我知道，如果它仍然是 失敗。