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.




Komentar

Posting Komentar

Postingan populer dari blog ini

Cara membuat Excel search engin Simple Mudah dan Cepat

Gambar
  Cara membuat Excel search engin Simple Mudah dan Cepat -   dalam pelajaran ini kita masih membahas mengenai rumus Excel tentunya kita akan mengembangkan fungsi fungsi Excel dasar menjadi sebuah aplikasi atau sebuah program di dalam Microsoft Excel, dari dasar-dasar fungsional yang kita pahami hingga fungsi-fungsi yang sangat rumit di dalam Microsoft Excel, kita sekarang membahas mengenai search engine atau pencarian data dengan menggunakan fungsional Microsoft Excel , tentunya dengan metode yang simple dan bisa dipelajari oleh siapapun dengan fungsi-fungsi dasar yang tentunya fungsi-fungsi dasar tersebut telah kita pelajari pada tutorial-tutorial sebelumnya mari kita mulai saja mengenai metode dan cara pembuatan search engine dengan menggunakan media excel dengan fungsi-fungsi dasar.  pertama kita akan memasukkan sebuah data tabel misal saya contohkan sebuah tabel lagu yang ada di bawah ini, kemudian setelah itu kita memasukkan fungsi search di mana fungsi ini ad...
Baca selengkapnya

Belajar Excel Lengkap Memahami Formulas Recently Used ( Pintasan Riwayat Fungsi )

Gambar
                                         Belajar Excel Lengkap Memahami Formulas Recently Used ( Pintasan Riwayat Fungsi ) - Tutorial Excel lengkap cara memahami fungsi Excel lengkap dengan mudah, yaitu fungsi yang sangat penting dalam Microsoft Excel menu formulas recently used,  menu ini sangat penting dalam pembelajaran Microsoft Excel  dalam bahasa lain ini merupakan pintasan dari riwayat fungsi yang telah kita gunakan, pintasan ini akan tersimpan di dalam menu formulas recently used,  hal ini sangat penting sekali dalam memahami fungsi tersebut karena setiap kita mengolah data Excel pasti kita menggunakan fungsi-fungsi yang sering kita pakai bisa fungsi sum atau fungsi average atau fungsi max atau fungsi min dan fungsi fungsi yang lain seperti fungsi offset setiap kita menggunakan fungsi-fungsi itu maka data fungsi-fungsi tersebut akan tersimpan di dalam menu for...
Baca selengkapnya

Tutorial Excel Belajar Fungsi Bring Forward, Send Beckward, Selection pane dan Align

Gambar
  Tutorial Excel Belajar Fungsi Bring Forward, Send Beckward, Selection pane dan Align - Masih Dalam kajian Excel Fungsional kita masih belajar tentang dasar-dasar dari fungsi Excel, dan pembahasan kali ini masih tentang fungsi dari bring forward send backward dan selection pane dan fungsi ini masih dalam fungsi dasar Microsoft Excel dalam kemasan Page layout, tentunya kita sebagai program Microsoft Excel harus mengenal fungsi tersebut yaitu memahami dasar dari fungsional apa itu bering forward send backward dan selection pane serta Align tersebut dan pembahasan ini akan kita kupas di dalam tutorial ini namun sebelumnya kita akan mengenal dulu untuk apakah fungsi tersebut dan bagaimanakah cara kerja dari fungsi-fungsi tersebut mari kita pahami dari hal yang paling dasar dari fungsional tersebut yaitu tentang pengertian dari ketiga fungsi yang dimaksud. PENGERTIAN BERING FORWARD Bring forward adalah sebuah fungsional Excel yang digunakan dalam metode penempatan sebuah gambar atau ...
Baca selengkapnya