2

I am new in chrome extension development. I'm trying to develop a sidebar type extension where I've successfully append sidebar on action button click from browser's address bar. I'm trying to load an angular 2 app of mine in my script.js (read event script) but failing to do so.

My manifest:

{
    "name": "My extension",
    "manifest_version": 2,
    "version": "1.0.0",
    "background": {
        "page": "background.html"
    },
    "page_action": {
        "default_icon": "icon.png",
        "default_title": "My Extension"
    },
    "content_scripts": [{
        "matches": ["<all_urls>"],
        "js": ["script.js"]
    }],
    "permissions": [
        "tabs"
    ]
}

background.js:

chrome.tabs.onUpdated.addListener(function(tabId) {
    chrome.pageAction.show(tabId);
});

chrome.tabs.getSelected(null, function(tab) {
    chrome.pageAction.show(tab.id);
});

chrome.pageAction.onClicked.addListener(function(tab) {
    chrome.tabs.getSelected(null, function(tab) {
        chrome.tabs.sendRequest(tab.id, {
            callFunction: "toggleSidebar"
        }, function(response) {
            console.log(response);
        });
    });
});

background.html:

<script type="text/javascript" src="background.js"></script>

script.js:

function init() {
    chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
        if (request.callFunction == "toggleSidebar") toggleSidebar();
    });

    sidebarOpen = false;
}

function toggleSidebar() {
    var sidebar = document.getElementById('mySidebar');

    if (!sidebar) {
        sidebar = document.createElement('div');
        sidebar.id = "mySidebar";
        sidebar.style.cssText = "position:fixed; top:0px; right:0px; height:100%; background:white;\
        box-shadow:inset 0 0 1em black; z-index:999999;";

        document.body.appendChild(sidebar);
    }

    debugger;
    sidebar.style.width = sidebarOpen ? '0px' : '300px';
    sidebarOpen = !Boolean(sidebarOpen);

    //how to load an angular2 app from here or from background.html
}

init();
Nafiul Islam
  • 1,220
  • 8
  • 20
  • Possible duplicate of [Building a Chrome Extension - Inject code in a page using a Content script](http://stackoverflow.com/questions/9515704/building-a-chrome-extension-inject-code-in-a-page-using-a-content-script) – Daniel Lizik Aug 01 '16 at 17:49
  • 1
    Possible duplicate of [Using Angular in extension on a page that already uses angular](http://stackoverflow.com/questions/21048891/using-angular-in-extension-on-a-page-that-already-uses-angular) – Haibara Ai Aug 02 '16 at 01:11
  • Above link tells how to use `chrome.tabs.executeScript` to inject angular into web page – Haibara Ai Aug 02 '16 at 01:12

0 Answers0