可以使用Chrome扩展将HTML标记添加到网站吗？

我正在尝试创建一个Chrome扩展程序，该扩展程序创建一个类似于正常的按钮的按钮，显示我制作的自定义页面（这已经完成并适用于我的扩展程序），但接下来要做的事情是，而我不是不确定该如何实现，是注入标记到一个特定的网页...可以使用Chrome扩展将HTML标记添加到网站吗？

这里是我的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和东西。

来源

2014-12-04 POC0bob

恐怕你必须用JS构建标记并使用content_script。 – Leo 2014-12-04 02:34:06

我已经看到这个做了不止一次，修改同一个网站的其他插件，也许他们做了与java脚本相同的事情，这是可能的。我能写一个JavaScript来注入一个字符串或类似的HTML标记，并注入content_script？ – POC0bob 2014-12-04 03:05:19

糟糕，我前段时间研究了这一点。我还阅读了很多CRX的源代码，每个人都在使用content_script并注入DOM。据我所知，答案是可悲的是，不。 – Leo 2014-12-04 03:12:12

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

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

来源

2014-12-04 04:54:40 Leo

可以使用Chrome扩展将HTML标记添加到网站吗？

回答

相关问题