›

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.




Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel