> [!meta] Metadata
> authors:: Erwin Carrasquilla
> url:: https://app.raindrop.io/my/13211134/item/198839492/preview
> references::
> publish_date:: 2018-09-04
---
## Where to start
with `manifest.json`
```json
// manifest.json
{
“name”: “Replace with kitty”,
“version”: “1.0”,
“description”: “Build an Extension that replaces your images with kittens”,
“manifest_version”: 2
}
```
### add permissions
```json
// manifest.json
{
"name": "Getting Started Example",
"version": "1.0",
"description": "Build an Extension!",
"manifest_version": 2,
// This page_action option uses the activeTab permission
"page_action": {
"default_title": "My first extension"
}
}
```
### Tell your extension what to do
```json
// manifest.json
{
"name": "Getting Started Example",
"version": "1.0",
"description": "Build an Extension!",
"manifest_version": 2,
// This page_action option uses the activeTab permission
"page_action": {
"default_title": "My first extension"
},
"permissions": [
"activeTab",
"declarativeContent" // you can add whatever you want/need
],
“background”: {
“scripts”: [
// will scan file and listen for any pertinent events
“scripts.js”
],
“persistent”: false
}
}
```
in the background script `sripts.js`
```js
// scripts.js// Remove the current rules
chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
// Replace the current rules
chrome.declarativeContent.onPageChanged.addRules([
{
conditions: [/*curious? read more! */],
actions: [/* Go ahead, I know you want to*/]
}
])
})
```
```js
// scripts.js
// Remove the current rules
chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
// Replace the current rules
chrome.declarativeContent.onPageChanged.addRules([
{
conditions: [
/*
Create a new event Object with PageStateMatcher that
matches page urls that follolw http and https schemes
*/
new chrome.declarativeContent.PageStateMatcher({
pageUrl: {
// hostEquals:
schemes: [ ‘http’, ‘https’]
}
})
],
actions: [
/*
displays the page action
*/
new chrome.declarativeContent.ShowPageAction()
]
}])
})
```