可以使用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標記添加到網站嗎？

回答

相關問題