使用chrome擴展程序注入側面板不起作用

Question

我正在開發執行以下功能的Chrome擴展程序-

從網頁獲取網址路徑。 （此網頁路徑是固定的）
在新標簽頁中打開此網址。 網址可以是http：//或https：//
在其中插入具有簡單html表的iframe

我無法在擴展程序打開的新chrome標簽中注入html表。 我可以糾正什么以便執行步驟3？ 請在下面查看我的代碼-

background.js

    var tabId = "";
    chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {    
    //Show the popup
    if (request.message == "Enable_Popup") {
       chrome.pageAction.show(sender.tab.id);
    }

//Get Landing page Url from the fixed webapge   
if (request.message == "Open_LP") {
    chrome.tabs.getSelected(null, function(tab) {
    chrome.tabs.sendMessage(tab.id, { command: "get_url" },function(response){      
    var htmlCode = '<!DOCTYPE html><html style="height:100%"><head><link rel="stylesheet" type ="text/css" href="style.css"><!-- Latest compiled and minified CSS --><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><title>Konan</title></head><body class="myClass" id="fenxiui" style="height:100%"><div class="col-sm-12"><h1 id="head1" style="align:center">Konan</h1></div><br><br><br><br><iframe id="lp" class="col-lg-8 col-md-8 col-sm-8" src='+response+' style="height:100%"></iframe><iframe id="konanVal" class="col-lg-4 col-md-4 col-sm-4" src="'+val+'" style="height:100%"></iframe>';
    var url = 'data:text/html,' + encodeURIComponent(htmlCode);         
    chrome.tabs.create({"url": response}, function(tab1){               
         chrome.tabs.sendMessage(tab1.id, { command: "insert_ifrm" },function(){})
        })})})}})

內容腳本（table.js）

    chrome.extension.onMessage.addListener(function (msg, sender, sendResponse) {
    if (msg.command && (msg.command == "insert_ifrm")) {
    var valHTML = '<!DOCTYPE html><html><head><link rel="stylesheet" type ="text/css" href="style.css"><!-- Latest compiled and minified CSS --><meta charset="utf-8"><title>Konan</title></head><body><table><tr><th></th><td>Extraction 1</td></tr><tr><th>Value 1</th><td></td><td><textarea></textarea></td></tr><tr><th>Value 2</th><td></td><td><textarea></textarea></td></tr><tr><th>Value 3</th><td></td><td><textarea></textarea></td></tr><tr><th>Value 4</th><td></td><td><textarea></textarea></td></tr><tr><th>Value 5</th><td></td><td><textarea></textarea></td></tr></table><br><br><table><tr><th></th><td>Extraction 2</td></tr><tr><th>Value 1</th><td></td><td><textarea></textarea></td></tr><tr><th>Value 2</th><td></td><td><textarea></textarea></td></tr><tr><th>Value 3</th><td></td><td><textarea></textarea></td></tr><tr><th>Value 4</th><td></td><td><textarea></textarea></td></tr><tr><th>Value 5</th><td></td><td><textarea></textarea></td></tr></table><br><br><table><tr><th></th><td>Extraction 3</td></tr><tr><th>Value 1</th><td></td><td><textarea></textarea></td></tr><tr><th>Value 2</th><td></td><td><textarea></textarea></td></tr><tr><th>Value 3</th><td></td><td><textarea></textarea></td></tr><tr><th>Value 4</th><td></td><td><textarea></textarea></td></tr><tr><th>Value 5</th><td></td><td><textarea></textarea></td></tr></table></body></html>';
    var ifrm = document.createElement("iframe");
    ifrm.setAttribute("srcdoc", "valHTML");
    ifrm.style.width = "600px";
    ifrm.style.height = "480px";
    ifrm.style.align = "right";
    document.body.appendChild(ifrm);
}
});

Answer 1

您的代碼似乎正確。 您是否將table.js添加到manifest.json並確保它在每個頁面上運行？ 它看起來應該像這樣：

"content_scripts": [
        {
        "matches": [ "<all_urls>"],
        "js": ["table.js]
       }
]

使用chrome擴展程序注入側面板不起作用

問題描述

1 個解決方案

解決方案1
0 2017-01-09 08:58:46

使用chrome擴展程序注入側面板不起作用

問題描述

1 個解決方案

解決方案1 0 2017-01-09 08:58:46

解決方案1
0 2017-01-09 08:58:46