118 lines
No EOL
3.6 KiB
Markdown
118 lines
No EOL
3.6 KiB
Markdown
Basics
|
|
|
|
https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension
|
|
|
|
- For extension named borderify , directory order should be like this:
|
|
```
|
|
borderify/
|
|
-- icons/
|
|
---- border-48.png
|
|
--borderify.js
|
|
--manifest.json
|
|
```
|
|
- contents of manifest.json
|
|
` "matches": ["*://*.mozilla.org/*"],` this means that extension will work for the domain **mozilla.org**
|
|
```json
|
|
{
|
|
"manifest_version": 2,
|
|
"name": "Borderify",
|
|
"version": "1.0",
|
|
|
|
"description": "Adds a red border to all webpages matching mozilla.org.",
|
|
|
|
"icons": {
|
|
"48": "icons/border-48.png"
|
|
},
|
|
|
|
"content_scripts": [
|
|
{
|
|
"matches": ["*://*.mozilla.org/*"],
|
|
"js": ["borderify.js"]
|
|
}
|
|
]
|
|
}
|
|
|
|
```
|
|
|
|
- Contents of borderify.js
|
|
`document.body.style.border = "5px solid red";`
|
|
|
|
- Go to `about:debugging` in firefox url tab and click on load temporary extension and go to borderify folder and click on manifest.json as it links to every thing. now this extension is added until browser restart
|
|
|
|
|
|
- ### More (popups and content script)*
|
|
https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Your_second_WebExtension
|
|
|
|
|
|
Structure
|
|
```text
|
|
beastify/
|
|
|
|
beasts/
|
|
frog.jpg
|
|
snake.jpg
|
|
turtle.jpg
|
|
|
|
content_scripts/
|
|
beastify.js
|
|
|
|
icons/
|
|
beasts-32.png
|
|
beasts-48.png
|
|
|
|
popup/
|
|
choose_beast.css
|
|
choose_beast.html
|
|
choose_beast.js
|
|
|
|
manifest.json
|
|
|
|
```
|
|
browser methods
|
|
This browser object is a main difference between web apps and firefox add on as it let popup access paths and ability to communicate with content scripts.
|
|
https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API
|
|
Some are
|
|
`browser.`
|
|
- `runttime.` : This module provides information about your extension and the environment it's running in.
|
|
- `getURL` : get url for the path. this path is used to access resources of the extension whole folder
|
|
eg: `browser.runtime.getURL("beasts/frog.jpg")`
|
|
- `onMessage`: Use this event to listen for messages from another part of your extension.
|
|
eg
|
|
```js
|
|
browser.runtime.onMessage.addListener((message)=>{
|
|
if(message.command==="beastify") {
|
|
insertBeast(message.beastURL);
|
|
}
|
|
else if( message.command === "reset" ){
|
|
removeExistingBeasts();
|
|
}
|
|
})
|
|
```
|
|
- `tabs.`
|
|
- `insertCSS` : to inject css to active tab. this is an asynchronous function that returns promise
|
|
eg :
|
|
```js
|
|
const hidePage=`body > :not(.beastify-image){
|
|
display : none;
|
|
}`;
|
|
|
|
await browser.tabs.insertCSS({code: hidePage})
|
|
|
|
```
|
|
- `sendMessage` : to send single message from extension background script(or popup_script or page_script) to content scripts. its an asynchronous function
|
|
eg :
|
|
```js
|
|
browser.tabs.sendMessage(tabs[0].id, {
|
|
command : "beastify",
|
|
beastURL : url
|
|
})
|
|
```
|
|
- `removeCSS` : to remove css from the page which was injected by insertCSS method. it wont remove original CSS of page
|
|
eg : `await browser.tabs.removeCSS({code: hidePage})`
|
|
- `query` : Gets all tabs that have the specified properties, or all tabs if no properties are specified. an asynchronous function that returns `Promise<array>`
|
|
eg : `const tabs=await browser.tabs.query({active: true, currentWindow : true})`
|
|
- `executeScript` : injects javascript code to page. It is available for manifest v2 only
|
|
eg : `browser.tabs.executeScript({file: "/content_scripts/beastify.js"})`
|
|
or
|
|
`browser.tabs.executeScript({code: "console.log('hello')"`
|
|
|