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.98cloud.com/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.98cloud.com/ask/wp-content/uploads/2024/03/0f6c4ed6839b19be-c5dca4fa7ea3e591-4027073b7373b301e039c176e076d5b1.jpg" /><img decoding="async" src="https://www.98cloud.com/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-actions"> <a href="javascript:;" etap="like" class="post-like action action-like" data-pid="232923"><i class="tbfa"></i>赞(<span>0</span>)</a> <a href="javascript:;" class="action action-rewards" data-event="rewards"><i class="tbfa"></i> 打赏</a> </div> <div class="post-copyright">未经允许不得转载：<a href="https://www.98cloud.com/ask">九八云安全</a> » <a href="https://www.98cloud.com/ask/232923.html">Chrome如何给页面嵌入JS？</a></div> <div class="shares"><dfn>分享到</dfn><a href="javascript:;" data-url="https://www.98cloud.com/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.98cloud.com/ask/232922.html" rel="prev">16898这个数字背后隐藏了哪些秘密？</a></span> <span class="article-nav-next">下一篇<br><a href="https://www.98cloud.com/ask/232924.html" rel="next">买一个域名有什么用</a></span> </nav> <div class="relates relates-textcol2"><div class="title"><h3>相关推荐</h3></div><ul><li><a href="https://www.98cloud.com/ask/286188.html">dhcp添加服务器地址</a></li><li><a href="https://www.98cloud.com/ask/286186.html">discuz linux 部署</a></li><li><a href="https://www.98cloud.com/ask/286184.html">discuz 数据库方法</a></li><li><a href="https://www.98cloud.com/ask/286182.html">discuz x3 仿小蚂蚁门户网站</a></li><li><a href="https://www.98cloud.com/ask/286180.html">discuz 门户网站</a></li><li><a href="https://www.98cloud.com/ask/286176.html">diff linux 文件夹</a></li><li><a href="https://www.98cloud.com/ask/286174.html">discuz dj网站</a></li><li><a href="https://www.98cloud.com/ask/286172.html">discuz nt安装好的直接拷贝另一台服务器需要修改哪些信息</a></li></ul></div> <div class="title" id="comments"> <h3>评论 <small>抢沙发</small></h3> </div> <div id="respond" class="no_webshot"> <form action="https://www.98cloud.com/ask/wp-comments-post.php" method="post" id="commentform"> <div class="comt"> <div class="comt-title"> <img alt='' data-src='https://cravatar.cn/avatar/?s=50&d=mystery' srcset='https://cravatar.cn/avatar/?s=100&d=mystery 2x' class='avatar avatar-50 photo avatar-default' height='50' width='50' decoding='async'/> <p><a rel="nofollow" id="cancel-comment-reply-link" href="javascript:;">取消</a></p> </div> <div class="comt-box"> <textarea placeholder="你的评论可以一针见血" class="input-block-level comt-area" name="comment" id="comment" cols="100%" rows="3" tabindex="1" onkeydown="if(event.ctrlKey&&event.keyCode==13){document.getElementById('submit').click();return false};"></textarea> <div class="comt-ctrl"> <div class="comt-tips"><input type='hidden' name='comment_post_ID' value='232923' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /> <label for="comment_mail_notify" class="checkbox inline hide" style="padding-top:0"><input type="checkbox" name="comment_mail_notify" id="comment_mail_notify" value="comment_mail_notify" checked="checked"/>有人回复时邮件通知我</label></div> <button type="submit" name="submit" id="submit" tabindex="5">提交评论</button>  </div> </div> <div class="comt-comterinfo" id="comment-author-info" > <ul> <li><input class="ipt" type="text" name="author" id="author" value="" tabindex="2" placeholder="昵称(必填)"></li> <li><input class="ipt" type="text" name="email" id="email" value="" tabindex="3" placeholder="邮箱(必填)"></li> <li><input class="ipt" type="text" name="url" id="url" value="" tabindex="4" placeholder="网址"></li> </ul> </div> </div> </form> </div> </div> </div> <div class="sidebar"> <div class="widget-on-phone widget widget_ui_posts"><h3>攻防案列</h3><ul class="nopic"><li class="noimg"><a target="_blank" href="https://www.98cloud.com/ask/286387.html"><span class="text">网络运维的全能利器，揭开这款网络分析与监控平台的神秘面纱</span><span class="muted">2025-03-21</span></a></li><li class="noimg"><a target="_blank" href="https://www.98cloud.com/ask/237226.html"><span class="text">快来了解4个常见的在线Ping测试工具，轻松检测不同节点网络的延迟速度吧</span><span class="muted">2024-12-26</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"> <p>© 2010-2025 <a href="https://www.98cloud.com/ask">九八云安全</a> <a href="https://www.98cloud.com/ask/sitemap.xml">网站地图</a> </p> </div> </footer> <script>window.TBUI={"www":"https:\/\/www.98cloud.com\/ask","uri":"https:\/\/www.98cloud.com\/ask\/wp-content\/themes\/dux","ajaxurl":"https:\/\/www.98cloud.com\/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.98cloud.com/ask/wp-content/themes/dux/assets/js/loader.js?ver=9.1" id="loader-js"></script> </body> </html>