Can HTML markup be added to a website using a chrome extension?

Question

I am trying to create a Chrome extension that creates a button like a normal one that displays a custom page I made (this has already been done and works on my extension) but the next thing I wish to do, and I am not sure how to implement, is to inject markup into a specific webpage...

Here is my manifest.json:

{
  "manifest_version": 2,

  "name": "BattleNetwork",
  "description": "Your onestop BattleNetwork info center!",
  "version": "1.0",

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": [
    "http://robloxdatabase.x10.bz/"
  ]
}

Pretty standard. I know about the "Content Scripts" (https://developer.chrome.com/extensions/content_scripts) however, I am not sure if those will work for what I want, I wish to inject the following HTML:

<div class="games-list-container overflow-hidden" id="GamesListContainer20" data-sortfilter="0" data-gamefilter="1" data-minbclevel="0" style="height: 258px; cursor: auto;">
    <div class="games-list-header games-filter-changer">
        <h2>Battle Network</h2>
    </div>
    <div class="show-in-multiview-mode-only">
        <div class="see-all-button games-filter-changer btn-medium btn-neutral">
            See All
        </div>
    </div>

    <div class="games-list">
        <div class="show-in-multiview-mode-only">
            <div class="horizontally-scrollable" style="height: 168px; left: 0px;">

                <div class="game-item">
                    <div class="always-shown">
                        <a class="game-item-anchor" rel="external" href="/Battle-Network-Transit-Hub-place?id=147893516">
                            <span class=""><img class="game-item-image" src="http://t1.rbxcdn.com/d36424dceab83ed45eb7b4fab8e97c15"></span>
                            <div class="game-name notranslate">Battlenetwork Hub</div>
                        </a>

                        <span class="online-player roblox-player-text" style="float: left"></span>

                        <div class="show-on-hover-only deemphasized hidden">
                            <div class="creator-name notranslate">
                                by <a href="/User.aspx?ID=56766433">Battlenetwork</a>
                            </div>


                        </div>
                    </div>
                </div>
            </div>
            <div class="scroller prev hidden">
                <div class="arrow">
                    <img src="http://images.rbxcdn.com/bf9c0660cdeb6283b71aa9237716519e.png">
                </div>
            </div>
            <div class="scroller next">
                <div class="arrow">
                    <img src="http://images.rbxcdn.com/ab6e44a9d9ebfde2244da961275acd06.png">
                </div>
            </div>
        </div>
        <div class="ad-spacer"></div>
    </div>
</div>

...at the top of a division with id="GamesListsContainer" on the website "http://www.roblox.com/games/"

Is this possible? Any advice? Again, this is in a Chrome extension, I have the popup.html and stuff.

I'm afraid you'll have to construct the markups with JS and use content_script. — Leo, Dec 04 '14 at 02:34
I have seen this done more than once with other plugins that modify that same website, maybe they did the same thing with the java script, it is possible. Would I be able to write a javascript to inject a string or something like that with the HTML markup and inject that with the content_script? — POC0bob, Dec 04 '14 at 03:05
Oops, I did research on exactly this point, some time ago. I also read source code of quite a lot of CRXs, everybody is using content_script and inject to DOM. So far as I know, the answer is, sadly, nope. — Leo, Dec 04 '14 at 03:12
I mean, you can construct HTML structure with JS and inject, but it's not likely you can request a HTML file and inject to the page. Plus it's forbidden because you'll have to face the CORS policy. — Leo, Dec 04 '14 at 03:15
I am reading the code on a CRX from a plugin that does something similar to what I want to do, it appends some HTML markup on another page on roblox.com, maybe I can use that as an example to write my own? — POC0bob, Dec 04 '14 at 03:36
It is a plugin I have that lets me do it, chrome-extension://jifpbeccnghkjeaalbbjmodiffmgedin/crxviewer.html?crx=https%3A%2F%2Fclients2.google.com%2Fservice%2Fupdate2%2Fcrx%3Fresponse%3Dredirect%26os%3Dwin%26arch%3Dx86-64%26nacl_arch%3Dx86-64%26prod%3Dchromecrx%26prodchannel%3Dunknown%26prodversion%3D38.0.2125.58%26x%3Did%253Dddjfhkkpgfghimddaekfocbahebohdim%2526uc&zipname=ddjfhkkpgfghimddaekfocbahebohdim.zip — POC0bob, Dec 04 '14 at 03:54
I see, it's [**here**](https://chrome.google.com/webstore/detail/roblox-group-enhancer-by/ddjfhkkpgfghimddaekfocbahebohdim), I just viewed its source code. The HTML is constructed with JS, and injected by content_script. Still the same. :D — Leo, Dec 04 '14 at 04:20

score 0 · Answer 1 · answered Dec 04 '14 at 04:54

Once I also wondered you question, and have read source code of quite a lot of CRXs. But finally I found they all use the same approach: construct HTML with JS, and inject to page via content_script. Unlike the "popup" for browser_action, there seems no way to store HTML to a .html file and include to the page.

And one more thing, if you want to use XHR to request a .html in your CRX, it might fail because of the CORS policy. CRX has special origins like chrome-extension://..., that's obviously cross origin with http or https.

Can HTML markup be added to a website using a chrome extension?

1 Answers1