ElishaKay / udemy-fullstack-chrome-extension

Repo for the Udemy course on How To Build a Full-Stack Chrome Extension

Repo For The Udemy Course: 'Build a Full-Stack Chrome Extension with NodeJS and MongDB'

First Step for setting up this repo:

Git Clone or Download the folder (if you download as a Zip file, be sure to unzip it before uploading the extension code to chrome)

How To Setup Your Server

1. Install NodeJS: download link

2. Create a MongoDB Database (and User) on mLab (or your local machine).

3. Create a .env file within your Server's root folder DEV_DB=mongodb://root:{{password}}@ds215229.mlab.com:15229/udemy-extension-db where root = your mongo username, and {{password}} = your db password

How To Setup Your Chrome Extension

1. Navigate to your Chrome Extensions Tab

2. Click the "Developer Mode" switch (on the top right of the screen) (should be enabled)

3. Click "Load Unpacked" button. Choose the directory of the unzipped folder (the manifest.json file should be in the root directory chosen).

4. Visit https://www.amazon.com, and open your Dev Console. You should see the text 'content script ran' logged in your dev console.

5. If/when you add a Background.js page, visit your Chrome Extensions Tab again, and find the new Extension you just uploaded. Click the "background.html" link - this will give you a Chrome developer tools GUI to view what's happening in the "background.js" of your Chrome Extension.

Chrome Extension Structure

Best Practices: Make Post Requests from the Background (not Content Page)

Most sites have triggers that listen for when external apps are making post requests directly from the DOM (i.e. the Content.js page). As a Chrome Extension developer, you have the most privacy from the 'popup.js' page, and the 'background.js' pages, because popup.js and background.js are part of the Chrome Browser's Internal Structure.

Here's a code example of how the communication between background.js and content.js might look like:

Content.js:

chrome.runtime.sendMessage({type: "imageData", images: stuffToSave});

And here's how to listen for a message from the Popup.js, or Background.js:

chrome.runtime.onMessage.addListener(
        function(message, sender, sendResponse) {
            switch(message.type) {
                case "imageData":
                    console.log('got image Data from content.js: ', message)

Because the chrome.runtime.onMessage API goes out to the content.js, background.js, and popup.js pages, Chrome Extension developers frequently use the JavaScript switch statement when listening for these events.

You can use the following template in any of your main extension pages:

chrome.runtime.onMessage.addListener(
        function(message, sender, sendResponse) {
            switch(message.type) {
            	case x:
		    // code block
		    break;
		case y:
		    // code block
		    break;
		default:
		    // code block
            }
        }
);

Messaging: Important Note

'if you're debugging your extension and the Dev Tools window is open and focused, the array will be empty. You should check for that.'

source