javascript - Chrome 扩展程序在浏览器操作上注入(inject) javascript 和 Angular 被点击

Question

我有一个扩展，我只将 javascript 注入(inject)任何页面，但是当我注入(inject)它时，我的 Angular 模块和所有 Controller 都不起作用。我应该也注入(inject)它们还是做其他事情？

注入(inject).js

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

应用程序.js

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

注入(inject).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'));
}

list

...
"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

在 google chrome 中存在三种类型的脚本 ( Read More )。所有这些脚本都有自己的上下文。

在您的情况下，angularjs 库只能通过内容脚本访问。如果你想在注入(inject)脚本中访问 angularjs 和你的 Controller ，你也需要注入(inject)它们。注入(inject)时确保仅在加载前一个脚本时注入(inject)下一个脚本。

把它放在 src/injection.js 的顶部

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

让我知道这是否也适合你。