chrome

jackhaohuang · Nov 16, 2023 · d9bc384 · d9bc384
1 parent 65bcaf0
commit d9bc384
Show file tree

Hide file tree

Showing 8 changed files with 108 additions and 0 deletions.
diff --git a/background.js b/background.js
@@ -0,0 +1,5 @@
+chrome.runtime.onInstalled.addListener(function() {
+    console.log("Extension installed");
+    // Perform on install actions, e.g., setting up default values in storage
+    chrome.tabs.create({ url: 'http://google.com' });
+  });
diff --git a/content.js b/content.js
@@ -0,0 +1,36 @@
+// content.js
+// This script will change the background color of the Google homepage to lightblue
+
+// Check if the current page is Google's homepage
+if (window.location.hostname === 'www.google.com' && window.location.pathname === '/') {
+    // Change the background color to lightblue
+    document.body.style.backgroundColor = 'lightblue';
+
+    // Add a custom message to the page
+    const messageDiv = document.createElement('div');
+    messageDiv.textContent = 'This is a message from your Chrome Extension!';
+    messageDiv.style.position = 'fixed';
+    messageDiv.style.bottom = '10px';
+    messageDiv.style.right = '10px';
+    messageDiv.style.padding = '10px';
+    messageDiv.style.backgroundColor = '#fff';
+    messageDiv.style.border = '1px solid #ddd';
+    messageDiv.style.borderRadius = '4px';
+    messageDiv.style.boxShadow = '0 2px 4px rgba(0,0,0,0.2)';
+    document.body.appendChild(messageDiv);
+  }
+
+  // Listen for messages from the background script or popup
+  chrome.runtime.onMessage.addListener(
+    function(request, sender, sendResponse) {
+      if (request.greeting === "hello") {
+        console.log("Hello from the background script!");
+        // Perform actions based on the message
+        sendResponse({farewell: "goodbye"});
+      }
+    }
+  );
+
+  // This is just an example and won't necessarily do anything meaningful
+  // unless it's part of a larger extension that you've configured to work with Google's homepage.
+
diff --git a/icon/icon-128.png b/icon/icon-128.png
diff --git a/icon/icon-16.png b/icon/icon-16.png
diff --git a/icon/icon-48.png b/icon/icon-48.png
diff --git a/manifest.json b/manifest.json
@@ -0,0 +1,25 @@
+{
+    "manifest_version": 3,
+    "name": "Course Helper extension",
+    "version": "1.0",
+    "description": "A Chrome extension that suggests three relevant Wikipedia pages based on a given course",
+    "action": {
+      "default_popup": "popup.html",
+      "default_icon": {
+        "16": "icon/icon-16.png",
+        "48": "icon/icon-48.png",
+        "128": "icon/icon-128.png"
+      }
+    },
+    "permissions": ["activeTab"],
+    "background": {
+      "service_worker": "background.js"
+    },
+    "content_scripts": [
+      {
+        "matches": ["http://*/*", "https://*/*"],
+        "js": ["content.js"]
+      }
+    ]
+  }
+
diff --git a/popup.html b/popup.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Popup Example</title>
+    <style>
+        body {
+            width: 200px;
+            height: 100px;
+            margin: 10px;
+            font-family: "Segoe UI", sans-serif;
+            font-size: 14px;
+            text-align: center;
+        }
+        #status {
+            margin-top: 20px;
+        }
+        button {
+            margin-top: 10px;
+            padding: 5px 15px;
+        }
+    </style>
+</head>
+<body>
+    <div id="status">Click the button below!</div>
+    <button id="changeColor">Change Color</button>
+
+    <script src="popup.js"></script>
+</body>
+</html>
diff --git a/popup.js b/popup.js
@@ -0,0 +1,13 @@
+// popup.js
+document.addEventListener('DOMContentLoaded', function() {
+    var changeColorButton = document.getElementById('changeColor');
+    // onClick's logic below:
+    changeColorButton.addEventListener('click', function() {
+        chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
+            // Send a message to the active tab
+            chrome.tabs.sendMessage(tabs[0].id, {color: "blue"}, function(response) {
+                console.log('Color changed to blue');
+            });
+        });
+    }, false);
+}, false);