js扩展f12选中dom右键
时间: 2023-08-06 10:19:29 浏览: 84
js调试系列 控制台命令行API使用方法
可以使用 `chrome.contextMenus` API 在右键菜单中添加一个选项,然后使用 `chrome.devtools.panels` API 在开发者工具面板中注入脚本,以便在用户单击右键菜单项时运行该脚本。以下是一个简单的示例:
1. 在 `manifest.json` 文件中声明 `contextMenus` 和 `devtools` 权限:
```json
{
"name": "My extension",
"version": "1.0",
"permissions": [
"contextMenus",
"devtools",
"activeTab"
],
"background": {
"scripts": ["background.js"]
},
"manifest_version": 2
}
```
2. 在 `background.js` 文件中创建一个右键菜单项,并将其与 `devtools` 面板中的脚本关联起来:
```javascript
chrome.contextMenus.create({
id: "myContextMenu",
title: "My Context Menu",
contexts: ["all"]
});
chrome.contextMenus.onClicked.addListener(function(info, tab) {
if (info.menuItemId === "myContextMenu") {
chrome.devtools.panels.openResource("panel.html", function(panel) {
panel.onShown.addListener(function(panelWindow) {
panelWindow.runScript(info);
});
});
}
});
```
3. 在 `panel.html` 文件中注入要运行的脚本:
```html
<!DOCTYPE html>
<html>
<head>
<title>My Panel</title>
<script src="panel.js"></script>
</head>
<body>
</body>
</html>
```
4. 在 `panel.js` 文件中编写要运行的脚本:
```javascript
function runScript(info) {
// 获取用户选中的 DOM 元素
var selectedElement = info.selectionText;
// 在控制台中输出选中的 DOM 元素
console.log(selectedElement);
}
```
当用户在网页中选择一个 DOM 元素并单击右键时,右键菜单项 "My Context Menu" 将会显示。如果用户单击该菜单项,则会在开发者工具面板中打开 `panel.html` 文件,并将选中的 DOM 元素传递给 `panel.js` 脚本中的 `runScript()` 函数。在这个函数中,你可以执行任何你想要的操作,例如在控制台中输出选中的 DOM 元素。
阅读全文