[AngularJS]Chrome 扩展注入 javascript 和角上浏览器操作单击

发布时间: 2017/4/16 12:21:37
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我有一个扩展在哪里我注入只是 javascript 插入任何页面,但当我为它注入了我角的模块和所有控制器无法正常工作。我应该将它们注入太或做点别的吗?

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'));
}

清单

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

解决方法 1:

在谷歌那里的 chrome 存在三种类型的脚本 (阅读更多)。所有这些脚本都有其自己的上下文。

你的情况你,angularjs lib,是唯一可通过内容的脚本访问。如果你想要访问 angularjs 和您的控制器内注入脚本,您需要注入那些太。同时注射那些确保只有当加载以前的脚本注入下一个脚本。

把这个内 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"
 ]);

让我知道是否这也适用于你。

赞助商