chrome-extension

Developer-Zer0 · Jul 3, 2020 · c2d10e6 · c2d10e6
1 parent ba255f9
commit c2d10e6
Show file tree

Hide file tree

Showing 10 changed files with 178 additions and 0 deletions.
diff --git a/chrome_extension/background.js b/chrome_extension/background.js
@@ -0,0 +1,14 @@
+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()]
+		}]);
+	  });
+  });
diff --git a/chrome_extension/images/get_started128.png b/chrome_extension/images/get_started128.png
diff --git a/chrome_extension/images/get_started16.png b/chrome_extension/images/get_started16.png
diff --git a/chrome_extension/images/get_started32.png b/chrome_extension/images/get_started32.png
diff --git a/chrome_extension/images/get_started48.png b/chrome_extension/images/get_started48.png
diff --git a/chrome_extension/manifest.json b/chrome_extension/manifest.json
@@ -0,0 +1,27 @@
+{
+    "name": "Extension",
+    "version": "1.0",
+	"description": "Build an Extension!",
+	"permissions": ["activeTab", "declarativeContent", "storage"],
+    "background": {
+      "scripts": ["background.js"],
+      "persistent": false
+	},
+	"page_action": {
+		"default_popup": "popup.html",
+		"default_icon": {
+			"16": "images/get_started16.png",
+			"32": "images/get_started32.png",
+			"48": "images/get_started48.png",
+			"128": "images/get_started128.png"
+		  }
+	  },
+	  "icons": {
+		"16": "images/get_started16.png",
+		"32": "images/get_started32.png",
+		"48": "images/get_started48.png",
+		"128": "images/get_started128.png"
+	  },
+	  "options_page": "options.html",
+    "manifest_version": 2
+  }
diff --git a/chrome_extension/options.html b/chrome_extension/options.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+  <html>
+    <head>
+      <style>
+        button {
+          height: 30px;
+          width: 30px;
+          outline: none;
+          margin: 10px;
+        }
+      </style>
+    </head>
+    <body>
+      <div id="buttonDiv">
+      </div>
+      <div>
+        <p>Choose a different background color!</p>
+      </div>
+    </body>
+    <script src="options.js"></script>
+  </html>
diff --git a/chrome_extension/options.js b/chrome_extension/options.js
@@ -0,0 +1,15 @@
+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);
diff --git a/chrome_extension/popup.html b/chrome_extension/popup.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+  <html>
+    <head>
+      <style>
+		body {
+			border-radius: 25px;
+		}
+        button {
+    		height: 20px;
+        	width: 150px;
+        	outline: none;
+			border-radius: 25px;
+        }
+      </style>
+    </head>
+    <body>
+		<div>
+			<h3>Select news anywhere on the page to know if It authentic or fake</h3>
+		</div>
+		<button id="sendText"><b>Go</b></button>
+		<script src="popup.js"></script>
+    </body>
+  </html>
diff --git a/chrome_extension/popup.js b/chrome_extension/popup.js
@@ -0,0 +1,78 @@
+let sendText = document.getElementById('sendText');
+
+  sendText.onclick = function(element) {
+    // chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
+	// 	chrome.tabs.executeScript(
+	// 		tabs[0].id,
+	// 		{code: 'var div=document.createElement("div"); document.body.prepend(div); div.innerText="hey"; div.id="modal1"; div.style.backgroundColor="' + color + '"'
+	// 	});
+	// });
+
+	var resp;
+	chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
+		chrome.tabs.executeScript(
+			null,
+			{code: "window.getSelection().toString()"}, function(selection){
+				var xmlhttp = new XMLHttpRequest();   // new HttpRequest instance 
+				var theUrl = "";
+				xmlhttp.open("POST", theUrl);
+				xmlhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
+				xmlhttp.send(JSON.stringify({ "text": selection[0] }));
+				xmlhttp.onreadystatechange = function() {
+					if (xmlhttp.readyState == 4) {
+					  // JSON.parse does not evaluate the attacker's scripts.
+					  resp = JSON.parse(xmlhttp.responseText);
+					}
+				}
+			}
+		);
+	});
+
+	var modal = 
+				'<div id="modal-content" class="modal">' +
+					'<div class="modal-header">' +
+						'<span id="cross" class="close" onclick="document.getElementById(`modal-content`).style.display = `none`;">&times;</span>' +
+						'<h2>Modal Header</h2>' +
+					'</div>' +
+
+					'<div class="modal-body">' +
+	  					'<p>Some text in the Modal..</p>' +
+					'</div>' +
+				'</div>'
+
+	var modal_style = 
+				'.modal-header {' +
+					'padding: 0px 0px 16px 16px;' +
+					'background-color: #5cb85c;' +
+					'color: white;' +
+					'}' +
+
+				'.modal-body {padding: 2px 16px;}' +
+
+				'.modal {' +
+					'position: relative;' +
+					'background-color: #fefefe;' +
+					'margin: auto;' +
+					'padding: 0px;' +
+					'border: 1px solid #888;' +
+					'width: 50%;' +
+					'box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);' +
+					'animation-name: animatetop;' +
+					'animation-duration: 0.4s' +
+				'}' +
+
+				'@keyframes animatetop {' +
+					'from {top: -300px; opacity: 0}' +
+					'to {top: 0px; opacity: 1}' +
+				'}'
+
+
+	chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
+		chrome.tabs.executeScript(
+			null,
+			{code: "var div=document.createElement('div'); document.body.prepend(div); div.innerHTML='"+modal+"'; var style=document.createElement('style'); document.body.prepend(style); style.innerHTML='"+modal_style+"';"}
+		);
+	});
+
+  };
+