4

我正在尝试创建一个 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 和其他东西。

4

1 回答 1

0

有一次我也想知道你的问题，并且已经阅读了很多 CRX 的源代码。但最后我发现它们都使用相同的方法：用 JS 构造 HTML，并通过 content_script 注入到页面。与 browser_action 的“弹出”不同，似乎没有办法将 HTML 存储到 .html 文件并包含到页面中。

还有一件事，如果你想使用 XHR 在你的 CRX 中请求一个 .html，它可能会因为 CORS 策略而失败。CRX 具有特殊的起源，例如chrome-extension://...，这显然与http或https交叉起源。

于 2014-12-04T04:54:40.143 回答