Chrome如何给页面嵌入JS？-九八云安全

在现代Web开发中，Chrome浏览器提供了多种方式将JavaScript嵌入到网页中，这些方法可以根据具体需求和上下文进行选择，本文将详细介绍几种常见的方法，包括内联脚本、嵌入式脚本、外部脚本以及通过Chrome扩展注入脚本。

### 一、内联脚本（Inline Script）

内联脚本是将JavaScript代码直接嵌入到HTML文档中的“标签内部，这种方法简单直接，适用于小型脚本或需要立即执行的代码。

#### 示例：

“`html

内联脚本示例</p> <h1>欢迎访问我的网站</p> <p><p> document.getElementById(“demo”).innerHTML = “Hello, world!”;</p> </article> <p></main> </p> <p>“`</p> <p>#### 优点：</p> <p>简单易用，适合快速测试和小型项目。</p> </p> <p><img decoding="async" src="https://www.zudns.com.cn/ask/wp-content/uploads/2024/03/0f6c4ed6839b19be-c5dca4fa7ea3e591-330afe64985c4da3b11593e3ff718eea.jpg" /> </p> <p>无需额外的HTTP请求，加载速度快。</p> <p>#### 缺点：</p> <p>不适合大型脚本，可能导致HTML文件过大，难以维护。</p> <p>不利于代码复用和模块化。</p> <p>### 二、嵌入式脚本（Embedded Script）</p> <p>嵌入式脚本是将JavaScript代码放在HTML文档的“标签中，但与内联脚本不同的是，它通常放在“或“标签的末尾，这种方式可以确保在页面加载完成后再执行脚本，避免阻塞页面渲染。</p> <p>#### 示例：</p> <p>“`html</p> <p><title>嵌入式脚本示例</p> <h1>欢迎访问我的网站</p> <p><img decoding="async" src="https://www.zudns.com.cn/ask/wp-content/uploads/2024/03/0f6c4ed6839b19be-c5dca4fa7ea3e591-4027073b7373b301e039c176e076d5b1.jpg" /><img decoding="async" src="https://www.zudns.com.cn/ask/wp-content/uploads/2024/03/0f6c4ed6839b19be-c5dca4fa7ea3e591-5a9486ad50513820c98f0763b10612da.jpg" /></p> <p> window.onload = function() {</p> <p> document.getElementById(“demo”).innerHTML = “Hello, world!”;</p> <p> };</p> <p>“`</p> <p>#### 优点：</p> <p>可以在页面加载完成后执行，避免阻塞页面渲染。</p> <p>比内联脚本更适合稍大的脚本。</p> <p>#### 缺点：</p> <p>仍然不利于代码复用和模块化。</p> <p>如果脚本较多，可能会使HTML文件变得复杂。</p> <p>### 三、外部脚本（External Script）</p> <p>外部脚本是将JavaScript代码放置在独立的`.js`文件中，然后在HTML文档中通过“标签引用，这种方法是最常见的，因为它有助于代码的组织、复用和维护。</p> <p>#### 示例：</p> <p>“`html</p> <p><title>外部脚本示例</p> <h1>欢迎访问我的网站</h1> </p> <p>“`</p> <p>“`javascript</p> <p>// script.js</p> <p>document.addEventListener(‘DOMContentLoaded’, (event) => {</p> <p> document.getElementById(“demo”).innerHTML = “Hello, world!”;</p> <p>});</p> <p>“`</p> <p>#### 优点：</p> <p>提高代码的可维护性和可读性。</p> <p>便于代码复用和模块化。</p> <p>减少HTML文件的大小，加快页面加载速度。</p> <p>#### 缺点：</p> <p>需要额外的HTTP请求，可能影响首次加载性能。</p> <p>需要管理多个文件，增加了项目的复杂性。</p> <p>### 四、通过Chrome扩展注入脚本</p> <p>Chrome扩展允许开发者向特定网站注入JavaScript代码，以实现自定义功能或修改网页内容，这通常用于开发浏览器插件或扩展程序。</p> <p>#### 示例：</p> <p>创建一个名为`manifest.json`的文件：</p> <p>“`json</p> <p> “manifest_version”: 2,</p> <p> “name”: “My Chrome Extension”,</p> <p> “version”: “1.0”,</p> <p> “content_scripts”: [</p> <p> {</p> <p> “matches”: [“”],</p> <p> “js”: [“content.js”]</p> <p> }</p> <p> ],</p> <p> “permissions”: [“activeTab”]</p> <p>“`</p> <p>创建一个名为`content.js`的文件：</p> <p>“`javascript</p> <p>document.addEventListener(‘DOMContentLoaded’, () => {</p> <p> let p = document.createElement(‘p’);</p> <p> p.textContent = ‘This text was injected by a Chrome extension!’;</p> <p> document.body.appendChild(p);</p> <p>});</p> <p>“`</p> <p>将这两个文件放在同一个目录中，然后在Chrome浏览器中打开`chrome://extensions/`页面，启用开发者模式并加载该目录作为扩展程序。</p> <p>#### 优点：</p> <p>可以跨站点注入脚本，功能强大。</p> <p>适合开发浏览器插件或扩展程序。</p> <p>可以访问和修改网页的DOM。</p> <p>#### 缺点：</p> <p>需要用户安装扩展程序，有一定的使用门槛。</p> <p>开发和调试相对复杂。</p> <p>受Chrome扩展API的限制。</p> <p>### 五、表格比较不同方法的特点</p> <p>| 方法 | 优点 | 缺点 | 适用场景 |</p> <p>|—————-|————————————————————–|————————————————————|———————————————————-|</p> <p>| 内联脚本 | 简单易用，无需额外HTTP请求 | 不适合大型脚本，不利于代码复用 | 小型项目或快速测试 |</p> <p>| 嵌入式脚本 | 可在页面加载完成后执行，避免阻塞页面渲染 | 不利于代码复用，可能使HTML文件复杂 | 中等大小的脚本，需要在页面加载后执行 |</p> <p>| 外部脚本 | 提高代码的可维护性和可读性，便于代码复用和模块化 | 需要额外的HTTP请求，可能影响首次加载性能 | 大型项目或需要高度模块化的代码 |</p> <p>| Chrome扩展 | 可以跨站点注入脚本，功能强大 | 需要用户安装扩展程序，开发和调试复杂 | 开发浏览器插件或扩展程序，需要跨站点修改网页内容的场景 |</p> <p>### 六、FAQs</p> <p>**Q1: 何时使用内联脚本？</p> <p>A1: 内联脚本适用于小型项目或快速测试，当你需要立即执行少量JavaScript代码时可以使用内联脚本，对于大型项目或需要高度模块化的代码，建议使用外部脚本。</p> <p>**Q2: Chrome扩展如何注入脚本到特定网站？</p> <p>A2: Chrome扩展可以通过在`manifest.json`文件中配置`content_scripts`来注入脚本到特定网站，你需要指定匹配的网站URL模式（”matches”: [“”]`），并在`content_scripts`数组中指定要注入的JavaScript文件（”js”: [“content.js”]`），创建一个包含所需JavaScript代码的文件（content.js`），并将其放在扩展程序的目录中，在Chrome浏览器中打开`chrome://extensions/`页面，启用开发者模式并加载该目录作为扩展程序。</p> <p>以上就是关于“<strong>chrome给页面嵌入js</strong>”的问题，朋友们可以点击主页了解更多内容，希望可以够帮助大家!</p> </article> <div class="post-copyright">未经允许不得转载：<a href="https://www.zudns.com.cn/ask">九八云安全</a> » <a href="https://www.zudns.com.cn/ask/232923.html">Chrome如何给页面嵌入JS？</a></div> <div class="shares"><dfn>分享到</dfn><a href="javascript:;" data-url="https://www.zudns.com.cn/ask/232923.html" class="share-weixin" title="分享到微信"><i class="tbfa"></i></a><a etap="share" data-share="weibo" class="share-tsina" title="分享到微博"><i class="tbfa"></i></a><a etap="share" data-share="qq" class="share-sqq" title="分享到QQ好友"><i class="tbfa"></i></a><a etap="share" data-share="qzone" class="share-qzone" title="分享到QQ空间"><i class="tbfa"></i></a><a etap="share" data-share="line" class="share-line" title="分享到Line"><i class="tbfa"></i></a><a etap="share" data-share="twitter" class="share-twitter" title="分享到X"><i class="tbfa"></i></a><a etap="share" data-share="facebook" class="share-facebook" title="分享到Facebook"><i class="tbfa"></i></a><a etap="share" data-share="telegram" class="share-telegram" title="分享到Telegram"><i class="tbfa"></i></a><a etap="share" data-share="skype" class="share-skype" title="分享到Skype"><i class="tbfa"></i></a></div> <div class="article-tags"></div> <nav class="article-nav"> <span class="article-nav-prev">上一篇<br><a href="https://www.zudns.com.cn/ask/232922.html" rel="prev">16898这个数字背后隐藏了哪些秘密？</a></span> <span class="article-nav-next">下一篇<br><a href="https://www.zudns.com.cn/ask/232924.html" rel="next">买一个域名有什么用</a></span> </nav> <div class="relates relates-imagetext"><div class="title"><h3>相关推荐</h3></div><ul><li><a href="https://www.zudns.com.cn/ask/344792.html"><img data-src="https://www.zudns.com.cn/ask/wp-content/uploads/2024/03/0f6c4ed6839b19be-c5dca4fa7ea3e591-7abc7b4db14a2605d70f5c0563af675a.jpg" alt="如何为GPU服务器添加IP地址？-九八云安全" src="https://www.zudns.com.cn/ask/wp-content/themes/dux/assets/img/thumbnail.png" class="thumb"></a><a href="https://www.zudns.com.cn/ask/344792.html">如何为GPU服务器添加IP地址？</a></li><li><a href="https://www.zudns.com.cn/ask/344790.html"><img data-src="https://www.zudns.com.cn/ask/wp-content/uploads/2024/03/0f6c4ed6839b19be-c5dca4fa7ea3e591-1004fff81ff364a899ca7f4ed9591c01.jpg" alt="GPU存储架构如何优化能带来更高计算性能-九八云安全" src="https://www.zudns.com.cn/ask/wp-content/themes/dux/assets/img/thumbnail.png" class="thumb"></a><a href="https://www.zudns.com.cn/ask/344790.html">GPU存储架构如何优化能带来更高计算性能</a></li><li><a href="https://www.zudns.com.cn/ask/344788.html"><img data-src="https://www.zudns.com.cn/ask/wp-content/uploads/2024/03/e154002750821088-37dc5468319bfb35-8b720c5dc1778beab2330017633ad5a8.jpg" alt="如何快速搭建GPU云服务器？-九八云安全" src="https://www.zudns.com.cn/ask/wp-content/themes/dux/assets/img/thumbnail.png" class="thumb"></a><a href="https://www.zudns.com.cn/ask/344788.html">如何快速搭建GPU云服务器？</a></li><li><a href="https://www.zudns.com.cn/ask/344786.html"><img data-src="https://www.zudns.com.cn/ask/wp-content/uploads/2024/03/pexels-luis-gomes-546819.jpg" alt="如何在GPU服务器上正确安装Java？-九八云安全" src="https://www.zudns.com.cn/ask/wp-content/themes/dux/assets/img/thumbnail.png" class="thumb"></a><a href="https://www.zudns.com.cn/ask/344786.html">如何在GPU服务器上正确安装Java？</a></li><li><a href="https://www.zudns.com.cn/ask/344784.html"><img data-src="https://www.zudns.com.cn/ask/wp-content/uploads/2024/03/0f6c4ed6839b19be-c5dca4fa7ea3e591-c3ee48c7399b9ca27cacab8c6e1b94e4.jpg" alt="GPU高性能运算服务器如何选购最划算？-九八云安全" src="https://www.zudns.com.cn/ask/wp-content/themes/dux/assets/img/thumbnail.png" class="thumb"></a><a href="https://www.zudns.com.cn/ask/344784.html">GPU高性能运算服务器如何选购最划算？</a></li><li><a href="https://www.zudns.com.cn/ask/344782.html"><img data-src="https://www.zudns.com.cn/ask/wp-content/uploads/2024/03/0f6c4ed6839b19be-c5dca4fa7ea3e591-4027073b7373b301e039c176e076d5b1.jpg" alt="GPU计算服务器为何成为高效运算的首选利器？-九八云安全" src="https://www.zudns.com.cn/ask/wp-content/themes/dux/assets/img/thumbnail.png" class="thumb"></a><a href="https://www.zudns.com.cn/ask/344782.html">GPU计算服务器为何成为高效运算的首选利器？</a></li><li><a href="https://www.zudns.com.cn/ask/344780.html"><img data-src="https://www.zudns.com.cn/ask/wp-content/uploads/2024/03/0f6c4ed6839b19be-c5dca4fa7ea3e591-7abc7b4db14a2605d70f5c0563af675a.jpg" alt="html5防止刷数据库-九八云安全" src="https://www.zudns.com.cn/ask/wp-content/themes/dux/assets/img/thumbnail.png" class="thumb"></a><a href="https://www.zudns.com.cn/ask/344780.html">html5防止刷数据库</a></li><li><a href="https://www.zudns.com.cn/ask/344778.html"><img data-src="https://www.zudns.com.cn/ask/wp-content/uploads/2024/03/0f6c4ed6839b19be-c5dca4fa7ea3e591-9b7b952827b57a8485dae15cb4a36241.jpg" alt="癌症人体免疫识别-九八云安全" src="https://www.zudns.com.cn/ask/wp-content/themes/dux/assets/img/thumbnail.png" class="thumb"></a><a href="https://www.zudns.com.cn/ask/344778.html">癌症人体免疫识别</a></li></ul></div> </div> </div> <div class="sidebar"> <div class="widget-on-phone widget widget_ui_orbui"><div class="item"><a href="https://www.zudns.com.cn/cdnprice.html" target="_blank"><img src="https://www.zudns.com.cn/ask/wp-content/uploads/2024/03/2023120116281711.png"></a></div></div><div class="widget-on-phone widget widget_ui_posts"><h3>攻防案列</h3><ul><li><a href="https://www.zudns.com.cn/ask/237226.html"><span class="thumbnail"><img data-src="https://www.zudns.com.cn/ask/wp-content/uploads/2024/12/20241226002944-1024x1019.jpg" alt="快来了解4个常见的在线Ping测试工具，轻松检测不同节点网络的延迟速度吧-九八云安全" src="https://www.zudns.com.cn/ask/wp-content/themes/dux/assets/img/thumbnail.png" class="thumb"></span><span class="text">快来了解4个常见的在线Ping测试工具，轻松检测不同节点网络的延迟速度吧</span><span class="muted">2024-12-26</span></a></li></ul></div><div class="widget widget_block"><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8089801583292488" crossorigin="anonymous"></script>  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-8089801583292488" data-ad-slot="9914263556" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div><div class="widget-on-phone widget widget_ui_posts"><h3>热门文章</h3><ul><li><a href="https://www.zudns.com.cn/ask/178243.html"><span class="thumbnail"><img data-src=""" alt="html怎么把字和图放一行-九八云安全" src="https://www.zudns.com.cn/ask/wp-content/themes/dux/assets/img/thumbnail.png" class="thumb"></span><span class="text">html怎么把字和图放一行</span><span class="muted">2024-08-01</span></a></li><li><a href="https://www.zudns.com.cn/ask/91029.html"><span class="thumbnail"><img data-thumb="default" src="/ask/wp-content/themes/dux/assets/img/random/1.jpg " class="thumb"></span><span class="text">在Redis中，数据大小有限制吗（redis缓存的大小限制）</span><span class="muted">2024-05-11</span></a></li><li><a href="https://www.zudns.com.cn/ask/91049.html"><span class="thumbnail"><img data-src="https://www.zudns.com.cn/ask/wp-content/uploads/2024/03/0f6c4ed6839b19be-c5dca4fa7ea3e591-3c56b07dfc4e452865f632c7c4d39c87.jpg" alt="tftpd32+ tftpd64文件传输安装和使用教程-九八云安全" src="https://www.zudns.com.cn/ask/wp-content/themes/dux/assets/img/thumbnail.png" class="thumb"></span><span class="text">tftpd32+ tftpd64文件传输安装和使用教程</span><span class="muted">2024-05-11</span></a></li></ul></div><div class="widget-on-phone widget widget_ui_orbui"><div class="item"><a href="https://www.98cloud.com/cart?fid=1&gid=1" target="_blank"><img src="https://www.zudns.com.cn/ask/wp-content/uploads/2024/03/2021032602420738.png"></a></div></div></div></section> <footer class="footer"> <div class="container"> <div class="flinks"> <strong>友情链接</strong> <ul class='xoxo blogroll'> <li><a href="https://www.tcptest.cn/">在线Ping</a></li> </ul> </div> <p>© 2010-2025 <a href="https://www.zudns.com.cn/ask">九八云安全</a> <a href="https://www.zudns.com.cn/ask/sitemap.xml">网站地图</a> </p> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?488c267f1d70da7246e08480daaf71ff"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </div> </footer> <script>window.TBUI={"www":"https:\/\/www.zudns.com.cn\/ask","uri":"https:\/\/www.zudns.com.cn\/ask\/wp-content\/themes\/dux","ajaxurl":"https:\/\/www.zudns.com.cn\/ask\/wp-admin\/admin-ajax.php","ver":"9.1","roll":"1 2","copyoff":0,"ajaxpager":"0","fullimage":"1","captcha":0,"captcha_comment":1,"captcha_login":1,"captcha_register":1,"table_scroll_m":1,"table_scroll_w":"800","pre_color":1,"pre_copy":1,"lang":{"copy":"\u590d\u5236","copy_success":"\u5df2\u590d\u5236","comment_loading":"\u8bc4\u8bba\u63d0\u4ea4\u4e2d...","comment_cancel_edit":"\u53d6\u6d88\u7f16\u8f91","loadmore":"\u52a0\u8f7d\u66f4\u591a","like_login":"\u70b9\u8d5e\u8bf7\u5148\u767b\u5f55","liked":"\u4f60\u5df2\u8d5e\uff01","delete_post":"\u786e\u5b9a\u5220\u9664\u8fd9\u4e2a\u6587\u7ae0\u5417\uff1f","read_post_all":"\u70b9\u51fb\u9605\u8bfb\u4f59\u4e0b\u5168\u6587","copy_wechat":"\u5fae\u4fe1\u53f7\u5df2\u590d\u5236","sign_password_less":"\u5bc6\u7801\u592a\u77ed\uff0c\u81f3\u5c116\u4f4d","sign_username_none":"\u7528\u6237\u540d\u4e0d\u80fd\u4e3a\u7a7a","sign_email_error":"\u90ae\u7bb1\u683c\u5f0f\u9519\u8bef","sign_vcode_loading":"\u9a8c\u8bc1\u7801\u83b7\u53d6\u4e2d","sign_vcode_new":" \u79d2\u91cd\u65b0\u83b7\u53d6"},"turnstile_key":""}</script> <script type="text/javascript" src="https://www.zudns.com.cn/ask/wp-content/themes/dux/assets/js/libs/jquery.min.js?ver=9.1" id="jquery-js" defer></script> <script data-minify="1" type="text/javascript" src="https://www.zudns.com.cn/ask/wp-content/cache/min/1/ask/wp-content/themes/dux/assets/js/loader.js?ver=1709615159" id="loader-js" defer></script> </body> </html>