зеркало из https://github.com/MicrosoftEdge/Demos.git
New devtools extension source code
This commit is contained in:
Patrick Brosset
Родитель
7819c35aef
Коммит
9c4add909a
|
|
@ -0,0 +1,3 @@
|
|||
# Create your own DevTools extension
|
||||
|
||||
This is the source code for the tutorial to create a Microsoft Edge extension that extends DevTools: [Create a DevTools extension](https://learn.microsoft.com/microsoft-edge/extensions-chromium/developer-guide/devtools-extension).
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
</head>
|
||||
<body>
|
||||
A Basic DevTools Extension.
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"name": "DevTools Sample Extension",
|
||||
"description": "A Basic DevTools Extension",
|
||||
"manifest_version": 3,
|
||||
"version": "1.0",
|
||||
"devtools_page": "devtools.html"
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
</head>
|
||||
<body>
|
||||
<script src="devtools.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
chrome.devtools.panels.create("Sample Panel", "icon.png", "panel.html", panel => {
|
||||
// code invoked on panel creation
|
||||
});
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"name": "DevTools Sample Extension",
|
||||
"description": "A Basic DevTools Extension with Panel",
|
||||
"manifest_version": 3,
|
||||
"version": "1.0",
|
||||
"devtools_page": "devtools.html"
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>A Basic DevTools Extension with Panel</h1>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
</head>
|
||||
<body>
|
||||
<script src="devtools.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
let availableMemoryCapacity;
|
||||
let totalMemoryCapacity;
|
||||
|
||||
chrome.devtools.panels.create("Sample Panel", "icon.png", "panel.html", panel => {
|
||||
// code invoked on panel creation
|
||||
panel.onShown.addListener( (extPanelWindow) => {
|
||||
availableMemoryCapacity = extPanelWindow.document.querySelector('#availableMemoryCapacity');
|
||||
totalMemoryCapacity = extPanelWindow.document.querySelector('#totalMemoryCapacity');
|
||||
});
|
||||
});
|
||||
|
||||
setInterval(() => {
|
||||
chrome.system.memory.getInfo((data) => {
|
||||
if (availableMemoryCapacity) {
|
||||
availableMemoryCapacity.innerHTML = data.availableCapacity;
|
||||
}
|
||||
if (totalMemoryCapacity) {
|
||||
totalMemoryCapacity.innerHTML = data.capacity;
|
||||
}
|
||||
});
|
||||
}, 1000);
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
{
|
||||
"name": "DevTools Sample Extension",
|
||||
"description": "A Basic DevTools Extension invoking CDP APIs",
|
||||
"manifest_version": 3,
|
||||
"version": "1.0",
|
||||
"devtools_page": "devtools.html",
|
||||
"permissions": [
|
||||
"system.memory"
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>A Basic DevTools Extension invoking CDP APIs</h1>
|
||||
<div>
|
||||
Available Memory Capacity: <span id="availableMemoryCapacity"></span>
|
||||
</div>
|
||||
<div>
|
||||
Total Memory Capacity: <span id="totalMemoryCapacity"></span>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
let id = null;
|
||||
const connections = {};
|
||||
|
||||
chrome.runtime.onConnect.addListener(devToolsConnection => {
|
||||
// Assign the listener function to a variable so we can remove it later
|
||||
let devToolsListener = (message, sender, sendResponse) => {
|
||||
if (message.name == "init") {
|
||||
id = message.tabId;
|
||||
connections[id] = devToolsConnection;
|
||||
// Send a message back to DevTools
|
||||
connections[id].postMessage("Connected!");
|
||||
}
|
||||
};
|
||||
|
||||
// Listen to messages sent from the DevTools page
|
||||
devToolsConnection.onMessage.addListener(devToolsListener);
|
||||
|
||||
devToolsConnection.onDisconnect.addListener(() => {
|
||||
devToolsConnection.onMessage.removeListener(devToolsListener);
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
document.addEventListener("click", (event) => {
|
||||
chrome.runtime.sendMessage({
|
||||
click: true,
|
||||
xPosition: event.clientX + document.body.scrollLeft,
|
||||
yPosition: event.clientY + document.body.scrollTop
|
||||
},
|
||||
response => {
|
||||
console.log("Received response", response);
|
||||
}
|
||||
);
|
||||
});
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
</head>
|
||||
<body>
|
||||
<script src="devtools.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
let youClickedOn;
|
||||
chrome.devtools.panels.create("Sample Panel", "icon.png", "panel.html", panel => {
|
||||
// code invoked on panel creation
|
||||
panel.onShown.addListener( (extPanelWindow) => {
|
||||
let sayHello = extPanelWindow.document.querySelector('#sayHello');
|
||||
youClickedOn = extPanelWindow.document.querySelector('#youClickedOn');
|
||||
sayHello.addEventListener("click", () => {
|
||||
// show a greeting alert in the inspected page
|
||||
chrome.devtools.inspectedWindow.eval('alert("Hello from the DevTools Extension");');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
|
||||
// Messages from content scripts should have sender.tab set
|
||||
if (sender.tab && request.click == true) {
|
||||
console.log('I am here!');
|
||||
if (youClickedOn) {
|
||||
youClickedOn.innerHTML = `You clicked on position (${request.xPosition}, ${request.yPosition}) in the inspected page.`;
|
||||
}
|
||||
sendResponse({
|
||||
xPosition: request.xPosition,
|
||||
yPosition: request.yPosition
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Create a connection to the background service worker
|
||||
const backgroundPageConnection = chrome.runtime.connect({
|
||||
name: "devtools-page"
|
||||
});
|
||||
|
||||
// Relay the tab ID to the background service worker
|
||||
backgroundPageConnection.postMessage({
|
||||
name: 'init',
|
||||
tabId: chrome.devtools.inspectedWindow.tabId
|
||||
});
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
{
|
||||
"name": "DevTools Sample Extension",
|
||||
"description": "A Basic DevTools Extension Interacting with the Inspected Page",
|
||||
"manifest_version": 3,
|
||||
"version": "1.0",
|
||||
"devtools_page": "devtools.html",
|
||||
"content_scripts": [{
|
||||
"matches": [
|
||||
"http://*/*",
|
||||
"https://*/*"
|
||||
],
|
||||
"run_at": "document_idle",
|
||||
"js": [
|
||||
"content_script.js"
|
||||
]
|
||||
}],
|
||||
"background": {
|
||||
"service_worker": "background.js"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>A Basic DevTools Extension Interacting with the Inspected Page</h1>
|
||||
<input type="button" id="sayHello" value="Say Hello to The Inspected Page!">
|
||||
<h2><span id="youClickedOn"></span></h2>
|
||||
</body>
|
||||
</html>
|
||||
Загрузка…
Ссылка в новой задаче