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')";
	}
});