Forum Posts

zarin taslima
Jun 30, 2022
In DIY Forum
Chrome extensions are an easy way to manipulate pages the way you want. They are also used to extend the functionality of a web page by writing custom code that will perform the necessary process. To get started, you need to understand how to set up the baseline of your extension code base. For an easier start, here is the official Chrome overview: https://developer.chrome.com/extensions/overview Let's say you need a third party page to run a piece of code to execute a certain command. You have the code ready as an extension. But how can you tell the browser that this is your extension and should be imported? To fully describe how extensions work, let's see an example with an extension for Asana. File structure 1. Manifest.json File First, you company banner design need to create a manifest.json file . What does this file do and what should you write to it? Basically, the manifest.json file in our configuration file indicates how the browser loads different permissions and resources. Here you tell the browser which version you are loading, the name, author and description of the extension. These can be viewed in the browser when the extension is properly loaded. You need to add the following lines of code in your manifest.json file : { "name": "DX Asana Goodies", "version": "1.1", "author": "Mariyan Dimitrov & Martin Spatovaliyski", "description": "extension for cool teammates!", "manifest_version": 2, "web_accessible_resources": [ "Resources/**" ], "content_scripts": [{ "js": ["jQuery.js", "popup.js"], "css": ["style.css"], "matches": ["https://app.asana.com/*"] }], "default_icon": { "16": "img/16.png", "32": "img/32.png", "128": "img/128.png" }, Icons: { "16": "pictures/salimeyes16.png", "32": "pictures/salimeyes32.png", 48: "pictures/salimeyes48.png", "128": "pictures/salimeyes128.png" } } 2. Import extension icon The extension requires a visible browser icon, so you need the following: default_icon - This property is responsible for the icon the user sees in their extension toolbar when the extension is active. icons - This is the property responsible for the icon the user sees when they go to the Chrome extensions page and import your plugin.
0
0
1
 

zarin taslima

More actions