在开发前端项目时，我们经常需要访问网站的全局变量以获取页面数据。Chrome 浏览器提供了一种方便的方式来实现这个目标：使用浏览器扩展（Chrome extension）来检索网页中的全局变量。
准备工作
在开始之前，你需要：
- 安装并熟悉使用 Chrome 浏览器
- 创建一个新的 Chrome 扩展程序
- 掌握基本的 JavaScript 和 Chrome 扩展开发知识
步骤
1. 在 manifest.json 中添加权限
在你的扩展程序的 manifest.json 文件中，添加以下权限：
"permissions": [ "activeTab" ],
这将允许你的扩展程序访问当前活动标签页的内容。
2. 编写 popup.html 和 popup.js 文件
创建一个名为 popup.html 的 HTML 文件，并添加以下代码：
-- -------------------- ---- ------- --------- ----- ------ ------ ---------- ------ ---------------- ------- ------------------------ ------- ------ ------- ------ ------------- ------- --------------------- ----------------- ---- ------------------ ------- -------展开代码
然后，创建一个名为 popup.js 的 JavaScript 文件，并添加以下代码：
document.getElementById('get-variable').addEventListener('click', () => { chrome.tabs.executeScript({ code: `JSON.stringify(window.globalVariable)` }, (result) => { document.getElementById('result').innerText = result; }); });
该脚本将在单击按钮时执行。它会使用 chrome.tabs.executeScript 函数来执行一个JavaScript代码片段，该代码片段将返回 JSON 格式的全局变量。
3. 加载扩展程序
在 Chrome 浏览器中打开 chrome://extensions/ 页面，并启用 Developer Mode。然后，选择“Load unpacked”并选择你的扩展程序文件夹以加载扩展程序。
4. 使用你的 Chrome 扩展程序
现在，在浏览器中打开任何网页，并单击扩展程序图标打开弹出窗口。单击“Get Variable”按钮，即可获取当前页面的全局变量。
总结
本文介绍了如何创建一个简单的 Chrome 扩展程序来从网页中检索全局变量。使用这个技术，你可以方便地访问和处理任何网站上的数据，使你的前端开发更加高效。
示例代码：https://github.com/OpenAI-Chatbot/Chrome-extension-retrieving-global-variable-from-webpage
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/29874
