2017-01-03 16 views
0

を働いていない -はChromeの拡張機能を使用して、サイドパネルを注入私は機能の下に実行Chromeの拡張機能開発しています

  1. をWebページからURLパスを取得します。 (このウェブページのパスは固定されています)
  2. このタブを新しいタブで開きます。私は拡張子によって開かれた新しいクローム]タブでHTMLテーブルを注入することができません単純なHTMLテーブル

を持つことではiframeを注入//

  • ://またはhttps:URLは、両方のhttpことができます。ステップ#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); 
    } 
    }); 
    
  • +0

    はい、私は質問をしています - ステップ3を実行できるように修正することはできますか? – aks

    答えて

    0

    あなたのコードが正しいようです。 table.jsmanifest.jsonに追加して、すべてのページで実行されていることを確認しましたか?

    "content_scripts": [ 
         { 
         "matches": [ "<all_urls>"], 
         "js": ["table.js] 
         } 
    ] 
    
    関連する問題