Chrome Extension inject Javascript und eckig auf Browser Aktion ist geklickt

Question

Ich habe eine Erweiterung, wo ich nur Javascript in jede Seite injizieren, aber wenn ich es injiziere mein Winkelmodul und alle Controller funktioniert nicht. Sollte ich sie auch spritzen oder etwas anderes machen?

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" 
    ] 
    } 
] 

Answer 1

In Google Chrome gibt es drei Arten von Skripten (Read More). Alle diese Skripte haben ihren eigenen Kontext.

In Ihrem Fall ist angularjs lib nur für Inhaltsskript zugänglich. Wenn Sie angularjs und Ihre Controller innerhalb des injizierten Skripts aufrufen möchten, müssen Sie diese auch injizieren. Beim Injizieren sollten Sie sicherstellen, dass das nächste Skript nur dann injiziert wird, wenn das vorherige Skript geladen wurde.

Diesen innerhalb src/injection.js oben

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" 
]); 

Lassen Sie mich wissen, ob das auch für Sie arbeitet.