使用angular注入html？

Inject HTML into a page from a content script

這是我的腳本，並沒有做任何事情。爲什麼它不起作用？

myApp.service('pageInfoService', function() { 
    this.getInfo = function(callback) { 
     var model = {}; 

     chrome.tabs.query({'active': true}, 
     function (tabs) { 
      if (tabs.length > 0) 
      { 
       model.title = tabs[0].title; 
       model.url = tabs[0].url; 

       chrome.tabs.sendMessage(tabs[0].id, { 'action': 'PageInfo' }, function (response) { 
        model.pageInfos = response; 
        callback(model); 
       }); 
      } 

     }); 
    }; 
}); 

myApp.controller("PopupController", function ($scope, pageInfoService) { 

    $scope.headertitle = "Madjidi"; 
    $scope.text = "Here can you enable or disable the extension at any time."; 
    $scope.switchMsg = "Active"; 
    //Add a switcher 
    var switcher = $(".test.checkbox").first(); 
    switcher.checkbox("set checked") 
    switcher.checkbox({ 
     onChecked: function() { 
      console.log("adsaf"); 
      $scope.switchMsg = "Active"; 
      $scope.$apply(); 

      $.get(chrome.extension.getURL('myimportfile1.html'), function(data) { 
      $($.parseHTML(data)).appendTo('body'); 
}); 

     }, 
     onUnchecked: function() { 
      console.log("adsaf"); 
      $scope.switchMsg = "Unactive"; 
      $scope.$apply(); 
     } 
    }); 

    /* 
    pageInfoService.getInfo(function (info) { 
     $scope.title = info.title; 
     $scope.url = info.url; 
     $scope.pageInfos = info.pageInfos; 

     $scope.$apply(); 
    }); 
    */ 





});

我的HTML是在我的鍍鉻用Exention結構的目錄/應用

<!DOCTYPE html> 
<html ng-app="AngularChromeEx" ng-csp> 
<head> 
    <link rel="stylesheet" href="/app/lib/semantic.min.css"> 
    <link rel="stylesheet" href="/app/css/popup.css"> 
    <script src="/app/lib/jquery-1.8.2.min.js"></script> 
    <script src="/app/lib/angular.min.js"></script> 
    <script src="/app/lib/semantic.min.js"></script> 
    <script src="/app/src/app.js"></script> 
    <script src="/app/src/controllers/PopupController.js"></script> 
</head> 
<body id="popup"> 
<div ng-controller="PopupController"> 
    <header> 
     {{headertitle}} <img src="https://cdn1.iconfinder.com/data/icons/user-interface-2/96/Gear-2-512.png" height="25px" width="25px"> 
    <form id="searchbox" class="ui form" action="connect.php" method="POST" onsubmit="return checkvalue(this)"> 
    <div class="control-group" style="float:left;"> 
     <div class="controls field" style="float:left;"> 
     <input type="text" id="email" name="email" placeholder="Search" class="ui input huge"> 
     </div> 

    </div> 
<div style="float:left;;margin-left:10px;"> 
     <!-- Button 
<button type=submit class="ui floating scrolling dropdown theme round submit button"> 
</button>--> 
</div> 
</form><!-- 
     <p> 
      {{text}} 
     </p>--> 
    </header> 

    <div class="ui test toggle checkbox"> 
     <input type="checkbox" name="public"> 
     <label>{{switchMsg}}</label> 
    </div> 
     <h4>Website channels</h4> 
    @aftonbladet.se 
    <div class="square"> 

    Reader comments<br>Simon<br>Ser ljust ut för Sverige<br>Interna konflikter i Ryska landslaget<br> 

</div> 



</div> 
</body> 
</html>

我PU THTê文件myimportfile1.html。當我運行它時，來自myimportfile1.html的html不會呈現我認爲它應該顯示的內容。當我在瀏覽器中運行我的代碼時，它會呈現除我想要注入的內容之外的所有內容。

這是我的manifest.json：

{ 
    "name": "Onacci Alpha", 
    "version": "0.97", 
    "manifest_version": 2, 

    "description": "Onacci", 
    "icons": { 
     "128": "icon128.png" 
    }, 
    "background": { 
     "scripts": ["app/src/background.js"] 
    }, 
    "browser_action": { 
     "default_icon": "img/defaultIcon19x19.png", 
     "default_popup": "/app/src/views/PopupView.html", 
     "default_title": "AngularJSChromeEx" 
    }, 
    "content_scripts": [ 
     { 
      "js": [ "app/lib/jquery-1.8.2.min.js", "app/src/content.js" ], 
      "matches": [ "*://*/*" ], 
      "run_at": "document_start" 
     } 
    ], 
    "minimum_chrome_version": "18", 
    "permissions": [ "http://*/*", "https://*/*", "unlimitedStorage", "contextMenus", "cookies", "tabs", "notifications" ], 
    "web_accessible_resources": [ 
    "myimportfile1.html", 
    "myimportfile2.html" 
    ] 

}

來源

2015-09-04 Niklas Rosencrantz

獲取任何控制檯錯誤？ – Vineet

@Vineet控制檯什麼也沒說。 –

這是什麼$ .get（和$（$。parse？ –

你的這部分代碼在彈出的範圍內，本執行：

$.get(chrome.extension.getURL('myimportfile1.html'), function(data) { 
     $($.parseHTML(data)).appendTo('body'); 
});

的意味着它試圖將它附加到彈出窗口b ODY。你想要做的是把它附加到網站的主體上。看一看傳遞教程中的消息，以瞭解如何從您的分機傳達到你的頁面內容：

https://developer.chrome.com/extensions/messaging

您也可以登錄您在$.get()功能接收到的數據只是爲了確保你收到什麼。

來源

2015-09-04 08:48:44 ccg

當我登錄時，我得到了'GET chrome-extension ： //apaihlpmdhfdnficockbdbpcmgakjgnk/myimportfile1.html net :: ERR_FILE_NOT_FOUND'因此，似乎我可以把文件放在錯誤的地方？ –

是的，html文件應該放在根文件夾中，這與manifest.json所在的位置相同。 – ccg

現在它可以工作了！我把它放在上面的一個目錄中（在根目錄下）。 HTML呈現在插件畫布區域，這是我的縮進。謝謝！ –

使用angular注入html？

回答

相關問題