Question

我试图做这个Q＆amp; 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>

我在我的chrome exention结构中的目录/ app中提交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"
  ]

}

Answer 1

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

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

意味着它试图将它附加到弹出窗口的正文中。你想要做的是将它附加到网站的主体。查看消息传递教程，了解如何从您的扩展程序与内容页面进行通信：

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

您也可以在$.get()功能中记录您收到的数据，以确保您收到任何内容。

使用angular注入html？

1 个答案: