Chrome extension inject javascript and angular on browser action is clicked

Question

I have an extension where I inject just javascript into any page, but when I inject it my angular module and all the controllers does not work. Should I inject them too or do something else?

injection.js

chrome.browserAction.onClicked.addListener(function (tab) {
    chrome.tabs.executeScript(tab.id, {
        file: 'src/injection.js'
    }, function () {
        console.log("Script injected!");
    });
});

app.js

angular.module('app', ['ngRoute', 'ui.router'])
    .run(function ($rootScope) {
        $rootScope.message = "Hello Angular again!";
        $rootScope.successMsg = "Hello Angular again! SUCCESS!";
});

injection.js

'use strict';
var cheapWatcherDiv = document.createElement('div');
cheapWatcherDiv.setAttribute('class', 'cheap-watcher');
document.body.appendChild(cheapWatcherDiv);
var logged = false;
if (logged == false) {
    $(".cheap-watcher").load(chrome.extension.getURL('views/main.html'));
    $('head').append('<link rel="stylesheet" href="' + chrome.extension.getURL('sass/main.css') + '" type="text/css" />');
} else {
    $(".cheap-watcher").load(chrome.extension.getURL('views/logoutTemplate.html'));
}

manifest

...
"content_scripts": [
{
  "run_at": "document_end",
  "matches": [
    "http://*/*",
    "https://*/*"
  ],
  "js": [
    "lib/jquery/dist/jquery.min.js",
    "lib/angular/angular.js",
    "lib/angular-route/angular-route.min.js",
    "lib/ui-router/release/angular-ui-router.min.js",
    "lib/angular-sanitize/angular-sanitize.min.js",

    "src/app.js",
    "src/LoginController.js",
    "src/LogoutController.js",
    "src/MainController.js"
     ]
   }
 ]

You need to inject all of your javascript files. Can you please show some more details on where you are loading `angular.js`, `app.js`? — Adnan Umer, Mar 29 '16 at 09:14
@NikasŽalias can you please help me i need to do some thing same — Nasiruddin Saiyed, May 01 '18 at 07:07

score 1 · Accepted Answer · edited May 23 '17 at 11:46

In google chrome there exists three types of scripts (Read More). All these scripts has their own context.

In your case you, angularjs lib is only accessible by content script. If you want to access angularjs and your controllers within injected script, you need to inject those too. While injecting those make sure to inject next script only when previous script is loaded.

Put this within src/injection.js at top

function injectJavaScripts(urls) {

    var elements = [];
    urls.forEach(function (url) {
        var s = document.createElement('script');
        s.src = chrome.extension.getURL(url);
        elements.push(s);
    });

    var target = document.head || document.documentElement;
    var i = 0;
    var patchNext = function () {
        if (i >= elements.length) return;
        else if (i > 0) {
            elements[i - 1].onload = null;
        } 

        elements[i].onload = patchNext;
        target.appendChild(elements[i]);

        i += 1;
    };

    patchNext();
};

injectJavaScripts([
    "lib/jquery/dist/jquery.min.js",
    "lib/angular/angular.js",
    "lib/angular-route/angular-route.min.js",
    "lib/ui-router/release/angular-ui-router.min.js",
    "lib/angular-sanitize/angular-sanitize.min.js",

    "src/app.js",
    "src/LoginController.js",
    "src/LogoutController.js",
    "src/MainController.js"
 ]);

Let me know if that works for you too.

That worked just fine! Thank you very much :) - @AdnanUmer – Nikas Žalias Mar 29 '16 at 09:52 — Nikas Žalias, Mar 29 '16 at 09:52

Chrome extension inject javascript and angular on browser action is clicked

1 Answers1