Developer Chrome Extension Rumus

 

Penulisan Script Dasar .json

{"":"","":"","":"","":"","":"","":"","":"","":"","":"","":"","":"",}

Penulisan Variable array:

"":["","",""],



exitappExitAppS↓

Contoh Manifest.json

{
    "name": "My Extension",
	"version": "1.0",
    "description": "Gets information from Google.",
"permissions":["tabs","activeTab","declarativeContent","storage","https://www.google.com/*"],

	"options_page": "options.html",
	 "background": {
      "scripts": ["background.js"],
      "persistent": false
    },
"Browser_action":{
	"Default_popup":"popup.html"
	},
	
	   "page_action": {
      "default_popup": "popup.html",
      "default_icon": {
        "16": "icon.png",
        "32": "icon.png",
        "48": "icon.png",
        "128": "icon.png"
      }
    },
	"icons":{
	  "16": "icon.png",
        "32": "icon.png",
        "48": "icon.png",
        "128": "icon.png"
	
	},
	    "content_scripts": [
    {
      "matches": ["http://*/","https://*/*"],
      "js": ["jquery-3.5.1.min.js","content.js"]
    }],

	"manifest_version": 2
  }

exitappExitAppS↓

Sintax permisson Chrome Extension

• "activeTab"
• "alarms"
• "background"
• "bookmarks"
• "browsingData"
• "certificateProvider"
• "clipboardRead"
• "clipboardWrite"
• "contentSettings"
• "contextMenus"
• "cookies"
• "debugger"
• "declarativeContent"
• "declarativeNetRequest"
• "declarativeNetRequestFeedback"
• "declarativeWebRequest"
• "desktopCapture"
• "displaySource"
• "dns"
• "documentScan"
• "downloads"
• "enterprise.deviceAttributes"
• "enterprise.hardwarePlatform"
• "enterprise.networkingAttributes"
• "enterprise.platformKeys"
• "experimental"
• "fileBrowserHandler"
• "fileSystemProvider"
• "fontSettings"
• "gcm"
• "geolocation"
• "history"
• "identity"
• "idle"
• "idltest"
• "loginScreenStorage"
• "loginState
• "management"
• "nativeMessaging"
• "networking.config"
• "notifications"
• "pageCapture"
• "platformKeys"
• "power"
• "printerProvider"
• "printing"
• "printingMetrics"
• "privacy"
• "processes"
• "proxy"
• "sessions"
• "signedInDevices"
• "storage"
• "system.cpu"
• "system.display
• "system.memory"
• "system.storage"
• "tabCapture"
• "tabs"
• "topSites"
• "tts"
• "ttsEngine"
• "unlimitedStorage"
• "vpnProvider"
• "wallpaper"
• "webNavigation"
• "webRequest"
• "webRequestBlocking"

Background script

• script
• persistent

"background": {
      "scripts": ["background.js","xxx","xx","xxxx"]
      "persistent": false
    },
exitappExitAppS↓

Page action

• "default_popup"
• "default_icon"
• "default_title"
• "default_popup"

"page_action": {
      "default_popup": "popup.html",
      "default_icon": {
        "16": "icon.png",
        "32": "icon.png",
        "48": "icon.png",
        "128": "icon.png"
      },
"default_title": "Google Mail",
"default_popup": "popup.html"

}

exitappExitAppS↓

Option Page

• "options_page"

"options_page": "options.html"

exitappExitAppS↓

Browser action

• "options_page"

"default_popup": "options.html"

exitappExitAppS↓

C

Content script

• "matches"
• "css"
• "js"

"content_scripts":[{ 
"matches": ["http://*/","https://*/*"],
"css": ["CSS.css"], 
"js": ["contentScript.js"] 
}],

exitappExitAppS↓

Contoh Script Chrome Extension

Download jquery

jquery-3.5.1.min

Contoh Background.js

chrome.runtime.onInstalled.addListener(function() {
  chrome.storage.sync.set({color: '#3aa757'}, function() {
    console.log('The color is green.');
  });
  chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
    chrome.declarativeContent.onPageChanged.addRules([{
      conditions: [new chrome.declarativeContent.PageStateMatcher({
        pageUrl: {hostEquals: 'developer.chrome.com'},
      })],
      actions: [new chrome.declarativeContent.ShowPageAction()]
    }]);
  });
});

exitappExitAppS↓

Content.js

 let changeColor = document.getElementById('changeColor');
  ...
  changeColor.onclick = function(element) {
    let color = element.target.value;
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
      chrome.tabs.executeScript(
          tabs[0].id,
          {code: 'document.body.style.backgroundColor = "' + color + '";'});
    });
  };
exitappExitAppS↓

popup.html

  <!DOCTYPE html>
  <html>
    <head>
      <style>
        button {
          height: 30px;
          width: 30px;
          outline: none;
        }
      </style>
    </head>
    <body>
      <button id="changeColor">ccccccccccccccccc</button>
	  <script src="popup.js"></script>
    </body>
  </html>
exitappExitAppS↓

option.html

<!DOCTYPE html>
<html>
  <head>
    <style>
      button {
        height: 30px;
        width: 30px;
        outline: none;
        margin: 10px;
      }
    </style>
  </head>
  <body>
    <div id="buttonDiv">
    </div>
  </body>
  <script src="options.js"></script>
</html>

exitappExitAppS↓

option.js

let page = document.getElementById('buttonDiv');
const kButtonColors = ['#3aa757', '#e8453c', '#f9bb2d', '#4688f1'];
function constructOptions(kButtonColors) {
  for (let item of kButtonColors) {
    let button = document.createElement('button');
    button.style.backgroundColor = item;
    button.addEventListener('click', function() {
      chrome.storage.sync.set({color: item}, function() {
        console.log('color is ' + item);
      })
    });
    page.appendChild(button);
  }
}
constructOptions(kButtonColors);

exitappExitAppS↓

popup.html

 let changeColor = document.getElementById('changeColor');
  ...
  changeColor.onclick = function(element) {
    let color = element.target.value;
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
      chrome.tabs.executeScript(
          tabs[0].id,
          {code: 'document.body.style.backgroundColor = "' + color + '";'});
    });
  };
exitappExitAppS↓

mystyle.css

 .spinspinspin{
animation-name:spin;
animation-duration: 1.0s;
animation-interation-count:infinite;

}

@keyframes spin{
0%{
transform: rotate(1440deg);
transform: rotate(0deg);
}
100%{
}
}
exitappExitAppS↓

frombackground.js

document.querySelector('img#hplogo').classList.add('spinspinspin');
exitappExitAppS↓

extensi script

 console.log()

exitappExitAppS↓

injeck JS to background 

chrome.tab.executeScript()

iinjeksi js 

chrome.tabs.executeScript(null,{file:'./frombackground.js'},()=> console.log('injeksi data'))

aktif tab

chrome.tabs.onActivated.addListener(tab =>{
	console.log(tab)
});

get tabId


chrome.tabs.onActivated.addListener(tab => {

		chrome.tabs.get(tab.tabId, current_tab_info => {
	console.log(current_tab_info.url)
	
		});
});

//chrome.tabs.executeScript(null,{file:'./frombackground.js'},() => console.log('i inject'))

injksi kombinasi if google

chrome.tabs.onActivated.addListener(tab => {
		chrome.tabs.get(tab.tabId, current_tab_info => {
			if(/^https:\/\/www\.google/.test(current_tab_info.url)){
			chrome.tabs.insertCSS(null,{file:'./mystyles.css'});
			chrome.tabs.executeScript(null,{file:'./frombackground.js'},()=> console.log('i inject'))	
				
			}
	
		});
});


inject css

chrome.tabs.insertCSS(null,{file:'./mystyles.css'})



exitappExitAppS↓

popup.