正文 

当前位置： 首页 > 源码 >

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

     2023-03-28     95

关键词：

【中文标题】可以使用 chrome 扩展将 HTML 标记添加到网站吗？【英文标题】：Can HTML markup be added to a website using a chrome extension? 【发布时间】：2015-02-01 18:20:48 【问题描述】：

我正在尝试创建一个 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>

...在网站“http://www.roblox.com/games/”上带有id="GamesListsContainer" 的部门顶部

这可能吗？有什么建议吗？同样，这是在 Chrome 扩展程序中，我有 popup.html 和其他东西。

【问题讨论】：

恐怕你必须用 JS 构建标记并使用 content_script。 我已经不止一次地看到其他插件修改了同一个网站，也许他们用java脚本做了同样的事情，这是可能的。我是否能够编写一个 javascript 来使用 HTML 标记注入一个字符串或类似的东西，然后用 content_script 注入它？ 糟糕，前段时间我对这一点进行了研究。我还阅读了很多 CRX 的源代码，每个人都在使用 content_script 并注入到 DOM。据我所知，很遗憾，答案是否定的。 我的意思是，你可以用 JS 构建 HTML 结构并注入，但你不可能请求一个 HTML 文件并注入到页面中。此外，它是被禁止的，因为您必须面对 CORS 政策。 我正在从一个插件读取 CRX 上的代码，该插件的功能与我想做的类似，它在 roblox.com 的另一个页面上附加了一些 HTML 标记，也许我可以将其用作自己写的例子？ 【参考方案1】：

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

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

【讨论】：

使用 chrome 扩展修改加载页面的 HTML

...论】：【参考方案1】：参考资料：ContentScriptsManifestFile您可以参考以下 查看详情

如何将 PayPal 智能按钮添加到 Chrome 扩展程序？

】如何将PayPal智能按钮添加到Chrome扩展程序？【英文标题】：HowdoIaddPayPalSmartButtonstoaChromeExtension?【发布时间】：2020-09-2110:02:35【问题描述】：我认为这将是一个简单的2行集成，如here所示。但是在添加正确的CSP以允许在线执行之... 查看详情

如何使用 WebStorm 进行 Chrome 扩展开发？

...序时遇到的一个问题是它无法识别chrome变量：有没有办法可以将chrome变量添加到Inspector以便它可以在我 查看详情

Chrome 扩展如何将数据从内容脚本发送到 popup.html

...的新手，我有这个班级作业。所以我需要制作一个插件，可以使用跨域请求计算任何给定页面上的 查看详情

使用 Chrome 内容脚本添加复杂的 HTML

】使用Chrome内容脚本添加复杂的HTML【英文标题】：AddingcomplexHTMLusingaChromecontentscript【发布时间】：2013-03-3005:28:38【问题描述】：我正在使用Chrome扩展程序的内容脚本来创建添加到网页上的复杂显示。我第一次测试直接集成到网... 查看详情

html中,通过啥标记可以插入多种格式的图片文件？

参考技术A可以使用<img></img>标签来插入各种格式的图片文件，因为这个标签就是img图片标签。基本文本、文档编辑软件，使用微软自带的记事本或写字板都可以编写，当然，如果你用WPS来编写，也可以。不过存盘时请使... 查看详情

chrome扩展程序-记住用户输入javascript

...酸并将该序列转换为相应的氨基酸序列。理想情况下，我可以点击浏览器中的扩展图标，然后会弹出一个文本框，我可以将序列粘贴到其中。点击“翻译”后，氨基酸序列将出现在输入文本框下方。我希望稍后再添加更多功能，... 查看详情

使用 jQuery 将随机选择的类添加到 HTML 标记

】使用jQuery将随机选择的类添加到HTML标记【英文标题】：AddingRandomlychosenclasstoHTMLtagusingjQuery【发布时间】：2010-12-2701:54:28【问题描述】：我需要做的是在我的菜单中，我想在每次功能启动（页面加载）时添加一个完全随机顺序... 查看详情

chrome扩展开发

...的信息。　　其他文件其实都是根据需要自己添加，有时可以 查看详情

如何将类名或样式名添加到使用 SQL 'FOR XML' 生成的 HTML 标记中

】如何将类名或样式名添加到使用SQL\\\'FORXML\\\'生成的HTML标记中【英文标题】：HowtoaddclassnameorstylenametoHTMLtagsgeneratedwithSQL\'FORXML\'如何将类名或样式名添加到使用SQL\'FORXML\'生成的HTML标记中【发布时间】：2021-12-0716:33:55【问题描述... 查看详情

chrome扩展程序获取所选文字(代码片段)

...道还有其他问题，但他们没有给我我想要的东西..答案您可以在回调函数中使用由执行代码计算的最后一个表达式：chrome.tabs.executeScript(code:"window.getSelection().toString();",function(selection)document.getElementById("output").value=selection[0];);另一... 查看详情

检测 ajax 页面更改并使用 DOM（Chrome 扩展、JavaScript）添加组件

】检测ajax页面更改并使用DOM（Chrome扩展、JavaScript）添加组件【英文标题】：DetectajaxpagechangesandaddcomponentswithDOM(ChromeExtensions,JavaScript)【发布时间】：2021-10-0512:03:58【问题描述】：我正在尝试将DOM元素添加到页面https://anilist.co/user/... 查看详情

将 unicode 添加到字符串 html 标记模式

...：2018-06-0711:39:22【问题描述】：在SSIS中运行时，我正在使用以下C#脚本从描述列中删除HTML标记。我试图将以下unicode:添加到下面的字符串htmlTagPattern中，但我无法让它工作。感谢任何帮助。publicclassScriptMain:UserComponent 查看详情

如何使用javascript将事件添加到html标记

我有一个带有动态html标签的登录页面。问题是，我无法直接选择标签。它是一个链接。以下代码是构造：<divid="testid"><div><div><ahref="#">Button1</a><div><div><div>每次有人点击链接（a-tag）时，我都想... 查看详情

使用 javascript 将文本插入 textarea 以用于 google chrome 扩展

】使用javascript将文本插入textarea以用于googlechrome扩展【英文标题】：Insertingtextintotextareawithjavascriptforgooglechromeextension【发布时间】：2014-12-0810:18:03【问题描述】：我正在尝试扩展现有googlechrome扩展程序的功能。使用Wrikegooglechrome... 查看详情

JS 函数未定义 Chrome 扩展 Popup.js

...别，但似乎没有链接到popup.html。清单在图像中。我确实使用在线转换器将S 查看详情

chrome扩展content.js使动态网站崩溃[重复]

...溃，按钮将不起作用+连接将不起作用。有没有其他方法可以在不使应用程序崩溃的情况下解决这个问 查看详情

将googlecdn替换为国内源的chrome扩展，实现网站加速⚡️(代码片段)

...国内的。缘起由于众所周知的原因，只需替换一个域名就可以继续使用Google提供的前端公共库了。同样，通过script标记引用这些资源，让网站访问速度瞬间提速！很多网站，尤其是国外网站，为了加快网站的速度，都使用了Google... 查看详情