initial
This commit is contained in:
nm1
commit
74ae93a96e
5 changed files with 94691 additions and 0 deletions
|
|
@ -0,0 +1,118 @@
|
|||
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')"`
|
||||
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
Chrome
|
||||
|
||||
- Simple one
|
||||
https://www.freecodecamp.org/news/building-chrome-extension/
|
||||
Manifest.json
|
||||
```json
|
||||
{
|
||||
"name": "Covid-19 Stats UK",
|
||||
"version": "1.0.0",
|
||||
"description": "latest covid data of UK",
|
||||
"manifest_version": 3,
|
||||
"author": "Sampurna Chapagain",
|
||||
"action":{
|
||||
"default_popup": "index.html",
|
||||
"default_title": "Latest Covid Report"
|
||||
}
|
||||
}
|
||||
```
|
||||
- Access active page dom
|
||||
https://infoheap.com/chrome-extension-tutorial-access-dom/
|
||||
https://www.sung.codes/blog/2019/getting-dom-content-from-chrome-extension-2
|
||||
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
Debugging
|
||||
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
Signing
|
||||
|
||||
- After uploading it and getting approved by firefox add on store we get uuid. so now if we wanna distribute it wothout firefox add on store as it may get unlisted so only way is using xpi or zip format
|
||||
Before packing it add uuid in **manifest.json** like this:
|
||||
browser_specific_settings > gecko > id
|
||||
i believe that's the structure
|
||||
|
||||
```json
|
||||
"browser_specific_settings": {
|
||||
"gecko": {
|
||||
"id": "{id-in-curlys}",
|
||||
"strict_min_version": ""
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
firefox structure btw
|
||||
chromium bit different if you had planned to develop for that
|
||||
i think for chromium it's chrome_settings
|
||||
chrome_settings_overrides
|
||||
no not that
|
||||
it seems i'm mistaken
|
||||
both use same
|
||||
oh wait i'm not mistaken
|
||||
idk what chromium uses tho
|
||||
turns out you can also combine manifest for an extension
|
||||
use gecko for desktop
|
||||
and gecko_android for android
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
Tips
|
||||
|
||||
- Bypass caching
|
||||
When injecting link element for css file, the problem of caching can be annoying so append something in the url like this
|
||||
```js
|
||||
// Create a link element for the CSS file
|
||||
const linkElement = document.createElement('link');
|
||||
linkElement.rel = 'stylesheet';
|
||||
linkElement.href = browser.runtime.getURL('styles.css') + '?v=' + Date.now(); // Append a timestamp
|
||||
document.head.appendChild(linkElement);
|
||||
|
||||
```
|
||||
- Reset injected element
|
||||
When we inject DOM element and reload extension previous one wont get removed unless page is reloaded so tag all those inserted element with extension name or by adding it in class.
|
||||
`contentScript.js`
|
||||
```js
|
||||
|
||||
// removing elements of class of ext_name
|
||||
function reset1(){
|
||||
|
||||
const elements=document.querySelectorAll(`.${ext_name}`)
|
||||
|
||||
for(let ele of elements){
|
||||
ele.remove()
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
reset1();
|
||||
|
||||
const navibar= document.createElement("div")
|
||||
navibar.className=`${ext_name} navigation_bar`
|
||||
navibar.innerHTML=`
|
||||
<button class=" nav_btn"> All Replies </button>
|
||||
`
|
||||
|
||||
|
||||
console.log('navibar: ',navibar.outerHTML);
|
||||
|
||||
|
||||
|
||||
const app=document.querySelector("body")
|
||||
app.insertBefore(navibar, app.children[0])
|
||||
|
||||
```
|
||||
|
||||
|
||||
in firefox to allow custom extensions for permanent without uploading in firefox
|
||||
|
||||
Type `about:config` in the address bar and press Enter
|
||||
Search for `xpinstall.signatures.required`.
|
||||
Ensure the value is set to false (toggle it by double-clicking if necessary).
|
||||
Loading…
Reference in a new issue