0

I'm trying to do what this Q&A says:

Inject HTML into a page from a content script

This is my script and it doesn't do anything. Why is it not working?

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();
    });
    */





});

My html is

<!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>

I pu tht e file myimportfile1.html in the directory /app in my chrome exention structure. When I run it, the html from myimportfile1.html doesn't render which I think that it should. When I run my code in the browser, it does render everything except what I want to be injected.

enter image description here

This is my 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"
  ]

}

enter image description here

Community
  • 1
  • 1
Niklas Rosencrantz
  • 25,640
  • 75
  • 229
  • 424

1 Answers1

1

This part of your code this executed within the scope of the popup:

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

The means that it tries to append it to the popup's body. What you want to do though is to append it to the body of the web site. Have a look at the message passing tutorial to see how to communicate from your extension to your content page:

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

Also you could log the data you receive in the $.get() function just to be sure you are receiving anything.

ccg
  • 313
  • 2
  • 8
  • When I log it, I get `GET chrome-extension://apaihlpmdhfdnficockbdbpcmgakjgnk/myimportfile1.html net::ERR_FILE_NOT_FOUND` so it seems that I could have put the file in the wrong place? – Niklas Rosencrantz Sep 04 '15 at 10:50
  • Yeah, the html file should be put in the root folder, which is the same as where manifest.json is in. – ccg Sep 04 '15 at 11:07
  • Now it works! I put it one directory above (in the root directory). The HTML is rendered on the plugin canvas area which was my indent. Thank you! – Niklas Rosencrantz Sep 04 '15 at 11:14