📅 最后修改于: 2023-12-03 15:14:08.933000 🧑 作者: Mango
在 Chrome 浏览器中使用扩展程序运行 JavaScript 可以实现很多有趣的功能和自定义操作。本文将介绍如何创建一个 Chrome 扩展来运行 JavaScript 代码。
首先，在你的开发目录中创建一个新的文件夹作为你的扩展程序的根目录。
在扩展目录中创建一个名为 manifest.json 的文件。这个文件是扩展程序的主要配置文件，定义了扩展的名称、版本、图标等信息。
{
"manifest_version": 2,
"name": "运行 JavaScript 扩展",
"version": "1.0",
"description": "在 Chrome 浏览器中运行 JavaScript 代码的扩展程序",
"icons": {
"128": "icon.png"
},
"browser_action": {
"default_popup": "popup.html",
"default_icon": "icon.png"
},
"permissions": [
"activeTab"
]
}
上述清单文件中定义了扩展的名称、版本号、描述、图标等基本信息。browser_action 字段定义了扩展在浏览器工具栏上的行为，默认的弹出页面为 popup.html。permissions 字段定义了扩展需要的权限，这里只需要访问当前活动标签页的权限。
在扩展目录中创建一个名为 popup.html 的文件，作为扩展点击图标时弹出的页面。这个页面将用于输入和运行 JavaScript 代码。
<!DOCTYPE html>
<html>
<head>
<title>运行 JavaScript 扩展</title>
<script src="popup.js"></script>
</head>
<body>
<textarea id="code" rows="10"></textarea><br>
<button onclick="runCode()">运行</button>
<div id="result"></div>
</body>
</html>
上述代码定义了一个文本域用于输入 JavaScript 代码，一个按钮用于运行代码，并在下方显示代码执行结果的 div 元素。
在扩展目录中创建一个名为 popup.js 的 JavaScript 文件，用于处理点击运行按钮时的逻辑。
function runCode() {
var code = document.getElementById('code').value;
var result = eval(code);
document.getElementById('result').innerText = result;
}
上述代码定义了一个名为 runCode 的函数，该函数获取输入的 JavaScript 代码并使用 eval 函数执行，然后将结果显示在结果区域。
在扩展目录中放置一个名为 icon.png 的图标文件作为扩展在浏览器工具栏上的图标。
打开 Chrome 浏览器，进入扩展程序管理页面（地址栏输入 chrome://extensions）。在页面右上角启用「开发者模式」，然后点击「加载已解压的扩展程序」按钮，选择你的扩展目录。扩展将被加载和启用。
现在，点击 Chrome 浏览器工具栏上的扩展图标，弹出页面将显示一个文本域和一个运行按钮。在文本域输入你的 JavaScript 代码，然后点击运行按钮，结果将显示在页面下方的结果区域。
console.log('Hello World!');
通过编写一个 Chrome 扩展程序，我们可以在浏览器中方便地运行自定义的 JavaScript 代码。这对开发者来说非常有用，可以快速测试和调试代码，实现个性化自定义操作。