1

I am very new to HTML and the complete web world wrt development. I am trying to create a chrome extension and have decided upon showing the extension UI to the user by injecting a content script when the browser action is clicked. I have created an HTML page for the UI to be shown and now I need to load this HTML page as a small widget somewhere on the right top of the current page (to appear like a popup). From the different things looked up on the internet, I have decided to use shadow DOM but have no clue how to do all this. Can someone help me with a sample code to help me go ahead with this? I am not able to write a javascript that would be used as the content script to do the above mentioned job.

Edit 1: After some more reading, I found out out that we need to create the element hierarchy using javascript and cannot directly make use of any created HTML page. Is that correct? And if we have to make use of javascript, should make use of calls to document.createElement and add element? or document.write?

labyrinth
  • 1,104
  • 3
  • 11
  • 32
  • Possible duplicate related to injecting html into a page from content script: http://stackoverflow.com/questions/16334054/inject-html-into-a-page-from-a-content-script – peterdotjs Mar 02 '15 at 17:18
  • Thank you so much for redirecting me to that thread! It had the exact required info! – labyrinth Mar 02 '15 at 17:59

2 Answers2

0

For Chrome extension content scripts you'll only be able to inject JavaScript/CSS. You won't be able to have you're own HTML popup page like when using browserAction.

With JavaScript you'll need to dynamically create elements and insert them into the DOM. You're on the right track. You can use document.createElement or a library like jQuery to help with DOM manipulation as you get more familiar with web dev.

peterdotjs
  • 1,526
  • 1
  • 13
  • 19
  • Thanks for the answer! I found how to make use of jQuery to do the job using the reference pointed to by peterdotjs in the comment! – labyrinth Mar 02 '15 at 18:00
  • I've added an answer myself to this question. Let me know, if that approach is correct :) – labyrinth Mar 02 '15 at 18:13
0

Just compiling reference from the responses I've got in this thread:

My Background.js:

function hello() {
    chrome.tabs.executeScript(null, { file: "injectedScripts/jquery-2.1.3.min.js" }, function () {
        chrome.tabs.executeScript(null, { file: "injectedScripts/a.js" });
    });
}

// Supposed to Called when the user clicks on the browser action icon.
chrome.browserAction.onClicked.addListener(hello);

Injected Script a.js:

$.get(chrome.extension.getURL("popup.html"), function (data) {
    //$(data).appendTo('body');
    // Or if you're using jQuery 1.8+:
    $($.parseHTML(data)).appendTo('body');
});

Also added popup.html and a.js paths to web_accessible_resources in manifest.json

labyrinth
  • 1,104
  • 3
  • 11
  • 32
  • Does the popup.html move the contents of the page around when it is injected through jquery in a.js? How did you make popup.html look like a popup? – manutdfan Apr 28 '16 at 19:28