Chrome扩展程序从Angular转换为Angular2

Question

This is not a duplicate of https://stackoverflow.com/a/21049890/439130 这不是https://stackoverflow.com/a/21049890/439130的副本
That one explains it via angularjs where I'm asking for angular (aka Angular2+) 那是通过angularjs解释的，我在这里问角度 （aka Angular2 +）

Code below is the main part of a Chrome extension that has been written via angularjs and it changes the content of the page plus it injects angularjs . 以下代码是已通过angularjs编写的Chrome扩展程序的主要部分，它更改了页面的内容，并注入了angularjs 。 I have to convert it to angular . 我必须将其转换为angular 。

Looked into the links below but they all targets/creates their own window and not uses the base content window. 查看了下面的链接，但它们均瞄准/创建了自己的窗口，而不使用基本内容窗口。

https://cito.github.io/blog/web-ext-with-angular/ https://cito.github.io/blog/web-ext-with-angular/
https://www.sitepoint.com/chrome-extension-angular-2/ https://www.sitepoint.com/chrome-extension-angular-2/
https://blog.couchbase.com/building-a-google-chrome-extension-with-couchbase-and-angular-2/ https://blog.couchbase.com/building-a-google-chrome-extension-with-couchbase-and-angular-2/
http://minimul.com/modify-an-existing-page-with-a-chrome-extension-built-using-angular-and-yeoman-part-1.html http://minimul.com/modify-an-existing-page-with-a-chrome-extension-built-using-angular-and-yeoman-part-1.html
https://www.red-gate.com/simple-talk/dotnet/software-tools/developing-google-chrome-extension-using-angular-4/ this one gives the most closest base to what I'm trying to do. https://www.red-gate.com/simple-talk/dotnet/software-tools/developing-google-chrome-extension-using-angular-4/ 这个提供了与我正在尝试的最接近的基础做。 Also created an issue here 在这里也创造了一个问题

Looking to get a clear sample that demonstrates how to bootstrap angular (2+) manually in loaded page for Chrome extension. 希望获得一个清晰的示例，以演示如何在已加载的Chrome扩展页面中手动引导角度 （2+） 。

index.html index.html

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
    <link rel="stylesheet" href="/css/app.css" />
</head>

<body>
    <h1>Hello world!</h1>

    <script src="/lib/jquery/jquery.min.js"></script>
    <script src="/lib/angular/angular.min.js"></script>
    <script src="/lib/angular-route/angular-route.min.js"></script>
    <script src="/lib/angular-resource/angular-resource.min.js"></script>
    <script src="/lib/angular-cookies/angular-cookies.min.js"></script>
    <script src="/scripts/app.js"></script>
</body>

</html>

app.js app.js

function DoWork() {
    var url = chrome.extension.getURL("/areas/body.html");
    $('html').load(url);

    chrome.runtime.sendMessage({ directive: "inject-angular" }, function(response) {
        console.log("retrieving response" + response);
        // Load();
    });
}

$(document).ready(DoWork);

background.js background.js

chrome.runtime.onMessage.addListener(
    function(request: any, sender: chrome.runtime.MessageSender, sendResponse: Function): void {
        switch (request.directive) {
            case "inject-angular":
                var queryInfo: chrome.tabs.QueryInfo = { currentWindow: true, active: true };
                chrome.tabs.query(queryInfo, function(tabs): void {
                    var tabId: number = tabs[0].id;
                    console.log("executing code");
                    chrome.tabs.executeScript(tabId, {
                        code: "window.name = 'NG_DEFER_BOOTSTRAP!' + window.name;"
                    }, function() {
                        console.log("executing angular");
                        chrome.tabs.executeScript(tabId, {
                            file: "/lib/angular/angular.min.js"
                        }, function() {
                            console.log("executing angular-filter");
                            chrome.tabs.executeScript(tabId, {
                                file: "/lib/angular-filter/angular-filter.min.js"
                            }, function() {
                                console.log("executing controller");
                                chrome.tabs.executeScript(tabId, { file: '/scripts/standalone/controller.js' }, function() {
                                    console.log("sending response.");
                                    sendResponse();
                                });
                            });
                        });
                    });
                });
                break;
            default:
                console.log("Unmatched request of '" + request + "' from script to background.js from " + sender + " :: [" + sender.tab.id + "] " + sender.tab.url);
                console.log(request);
                sendResponse();
        }
    }
);

Answer 1

it is very difficult task angularjs 1.x is beguiled using js so it's easy to developer with any third party API like chrome API. 使用js诱使angularjs 1.x任务非常艰巨，因此使用任何第三方API（例如chrome API）进行开发都很容易。 but in angular2 its base os type script so its very defect to build and debug. 但是在angular2中，它的基本操作系统类型脚本因此非常难以构建和调试。 (i am not saying not possible) （我不是说不可能）

Chrome扩展程序从Angular转换为Angular2

问题描述

index.html index.html

app.js app.js

background.js background.js

1 个解决方案

解决方案1
0 2017-12-26 11:03:46

Chrome扩展程序从Angular转换为Angular2

问题描述

index.html index.html

app.js app.js

background.js background.js

1 个解决方案

解决方案1 0 2017-12-26 11:03:46

解决方案1
0 2017-12-26 11:03:46