文章/答案/技术大牛

发布

社区首页 >问答首页 >用角注射html？

问用角注射html？
EN

Stack Overflow用户

提问于 2015-09-04 06:15:04

回答 1查看 1.3K关注 0票数 0

我正试着做这个问答说的话：

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放在/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"
  ]

}

javascript

html

angularjs

google-chrome-extension

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-09-04 08:48:44

在弹出窗口范围内执行的代码的这一部分：

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

意思是它试图把它附加到弹出式窗口的身体上。但是，您要做的是将其附加到网站的正文中。查看邮件传递教程，了解如何从扩展到内容页进行通信：

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

此外，您还可以记录在$.get()函数中接收到的数据，以确保您收到了任何信息。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/32391263

复制

相似问题

问用角注射html？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用角注射html？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用角注射html？
EN