EditR
🧩 Syntax:
[instructions] Write me the code for a chrome extension that allows me to inspect any website without using inspect command and also edit text on a live website, change fonts, and images for also disables links while editing.
// The following is an example of code for a Chrome Extension that allows you to inspect any website without using the inspect command, edit text on a live website, change fonts, and images, and also disables links while editing.
// This code uses HTML, CSS, and JavaScript to create the extension.
// Create the manifest.json file:
{
"name": "Inspector Extension",
"version": "1.0",
"manifest_version": 2,
"description": "A Chrome Extension to inspect any website without using the inspect command, edit text on a live website, change fonts, and images, and also disable links while editing",
"permissions": [
"activeTab",
"declarativeContent",
"storage"
],
"background": {
"scripts": ["background.js"]
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["content.js"]
}
],
"browser_action": {
"default_title": "Inspector Extension"
}
}
// Create the background.js file:
chrome.runtime.onInstalled.addListener(function() {
chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
chrome.declarativeContent.onPageChanged.addRules([{
conditions: [new chrome.declarativeContent.PageStateMatcher({
pageUrl: {hostEquals: '<all_urls>'},
})
],
actions: [new chrome.declarativeContent.ShowPageAction()]
}]);
});
});
// Create the content.js file:
// This code will enable the extension when the user clicks on the browser action
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript({
code: 'document.body.contentEditable = true;'
});
});
// This code will disable the link while editing
document.addEventListener("click", function(event) {
if (event.target.tagName == "A") {
event.preventDefault();
}
});
// This code will allow users to change the fonts and images of the website
document.addEventListener("click", function(event) {
if (event.target.className == "font-change") {
document.body.style.fontFamily = "sans-serif";
}
if (event.target.className == "image-change") {
document.body.style.backgroundImage = "url('https://example.com/image.jpg')";
}
});