Можно ли добавить HTML-разметку на веб-сайт с помощью расширения Chrome?

Я пытаюсь создать расширение Chrome, которое создает кнопку, похожую на обычную, которая отображает созданную мной пользовательскую страницу (это уже было сделано и работает с моим расширением), но следующее, что я хочу сделать, и я не уверен, как реализовать, это внедрить разметку на определенную веб-страницу...

Вот мой 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/"
  ]
}

Довольно стандартный. Я знаю о «Сценариях контента» (https://developer.chrome.com/extensions/content_scripts) однако я не уверен, что они будут работать для того, что я хочу, я хочу ввести следующий 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>

... в верхней части дивизиона с id="GamesListsContainer" на веб-сайте "http://www.roblox.com/games /"

Это возможно? Любой совет? Опять же, это в расширении Chrome, у меня есть popup.html и прочее.


javascript google-chrome html roblox
person POC0bob    schedule 04.12.2014    source источник
comment
Боюсь, вам придется создавать разметку с помощью JS и использовать content_script.   -  person Leo    schedule 04.12.2014
comment
Я видел, как это делается не раз с другими плагинами, которые модифицируют тот же веб-сайт, может быть, они сделали то же самое с java-скриптом, это возможно. Смогу ли я написать javascript для ввода строки или чего-то подобного с разметкой HTML и внедрить ее с помощью content_script?   -  person POC0bob    schedule 04.12.2014
comment
Ой, я исследовал именно этот момент некоторое время назад. Я также читал исходный код довольно многих CRX, все используют content_script и внедряют в DOM. Насколько я знаю, ответ, к сожалению, нет.   -  person Leo    schedule 04.12.2014
comment
Я имею в виду, что вы можете создать структуру HTML с помощью JS и внедрить ее, но маловероятно, что вы сможете запросить HTML-файл и внедрить ее на страницу. Кроме того, это запрещено, потому что вам придется столкнуться с политикой CORS.   -  person Leo    schedule 04.12.2014
comment
Я читаю код на CRX из плагина, который делает что-то похожее на то, что я хочу сделать, он добавляет некоторую HTML-разметку на другую страницу на roblox.com, может быть, я могу использовать это в качестве примера, чтобы написать свой собственный?   -  person POC0bob    schedule 04.12.2014
comment
не поделитесь ссылкой на crx?   -  person Leo    schedule 04.12.2014
comment
У меня есть плагин, который позволяет мне это делать, 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%2526ucdocfdghimbahebohkname=ddjfhk   -  person POC0bob    schedule 04.12.2014
comment
Понятно, это здесь, я только что просмотрел его исходный код. HTML создается с помощью JS и внедряется с помощью content_script. Все такой же. :D   -  person Leo    schedule 04.12.2014
comment
Похоже, тогда я этим и займусь!   -  person POC0bob    schedule 04.12.2014

Ответы (1)


arrow_upward
0
arrow_downward

Когда-то я тоже задавался вашим вопросом и читал исходники довольно многих CRX. Но, в конце концов, я обнаружил, что все они используют один и тот же подход: создают HTML с помощью JS и внедряют на страницу через content_script. В отличие от «всплывающего окна» для browser_action, похоже, нет способа сохранить HTML в файле .html и включить его на страницу.

И еще одно: если вы хотите использовать XHR для запроса .html в своем CRX, это может привести к сбою из-за политики CORS. CRX имеет особое происхождение, такое как chrome-extension://..., которое явно имеет перекрестное происхождение с http или https.

person Leo    schedule 04.12.2014