【发布时间】：2015-09-04 06:15:04
【问题描述】：
我正在尝试按照 Q&A 所说的去做：
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是
<!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>
我将文件 myimportfile1.html 放在我的 chrome 扩展结构的 /app 目录中。当我运行它时，来自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"
]
}
【问题讨论】：
-
遇到任何控制台错误？
-
@Vineet 控制台什么也没说。
-
这是什么 $.get( 和 $($.parse ?
-
你能提供你的 manifest.json 吗？
-
另外，请在弹出窗口中添加控制台输出，方法是右键单击它 -> 检查元素。弹出日志不会在主网站的控制台中报告。
标签： javascript html angularjs google-chrome-extension