First, let's create an empty folder to store the contents of the extension. The minimal file needed to define an extension is the manifest, which tells Chrome the defining characteristics of the extension
Create a file named in the folder: manifest.json
{
"manifest_version":3,
"version":"1.0",
"name":"Simple Bookmarker",
"action":{
"default_popup":"index.html"
},
"icons":{
"16":"images/logo16.png",
"48":"images/logo48.png",
"64":"images/logo64.png",
"128":"images/logo128.png"
},
"description":"A Simple bookmarker.Features include: Saving custom input, Saving current tab, etc",
"permissions":[
"tabs"
],
"author":"Omkar Bhoir"
}- Manifest_version: If you may need to use a different format of
manifest, you can check othermanifest_versionaccepted by Chrome - Background: Here you can place a script that runs in the background of the extension
- Permissions: These are the APIs you can access using extensions. Here, we will use storage to store persistent data, activeTab, check the active tab, and scripts to run operations on the active tab
- Action: Different types of components of the extension can be placed here. For this example, we just want to create a popup menu and tell Chrome to get the popup menu from popup.html
Code
The first part is by no means necessary, but I think it's helpful to show you how persistent data storage and background scripts work. Let's create a file called background.js
let color = "#fa9639"
// Run chrome.runtime.onInstalled.addListener(() => {
chrome.storage.sync.set({color}) // Use sync to store persistent data
console.log("Button Color Set")
})Create the popup.html file, of course you can create a separate CSS file, but for simplicity, we will only use style tags
<html>
<head>
<style>
button {
margin: 10px;
border-radius: 2px;
border: 1px solid black;
font-family: "Comic Sans MS";
}
</style>
</head>
<body>
<h1>Comic Sans Is King</h1>
<button id="changeFont">Swap Font</button>
<script src="popup.js"></script>
</body>
</html>Finally, let's actually switch to Comic Sans when we press the button. popup.js creates a file with the following code
// Snag our button
let btn = document.getElementById("changeFont")
// Set our button's color to the color that we stored
chrome.storage.sync.get("color", ({color}) => {
btn.style.backgroundColor = color
})
// Run on click
btn.addEventListener("click", async () => {
let [tab] = await chrome.tabs.query({active: true, currentWindow:true}) // Find current tab
chrome.scripting.executeScript({ // Run the following script on our tab
target: {tabId: tab.id},
function: () => {
let elems = document.querySelectorAll("*"); // Grab every element in the dom
for (var i = 0;i <elems.length; i++){
elems[i].style.fontFamily = "Comic Sans MS";
}
}
})
})The next step is to load it into Chrome
Loading our extension into chrome couldn't be easier. Use url to go to the extended menu
chrome://extensions/Make sure that the developer mode is enabled (can be done in the upper right corner), click on Load unzipped extension, select the folder where all our extension files are located, and then the extension will be loaded
Now you can use it like this
Upload to Chrome Store
Getting your app in the public Chrome store is a completely different test, and Chrome records it very well
发表评论 取消回复