There Are 5 Major Components to Building a Chrome Extension. Let’s go over them briefly, then in-depth.

1. The manifest file

This is the ledger of a chrome extension. It’s a JSON file that describes the behavior of a Chrome extension. You list things like: your extensions name; a description; which files or libraries you are including; and permissions your extension needs. We’ll get into more detail later on.

2. The background script

This is a JavaScript file. Think of it like the mainframe or hub of a Chrome extension.

One way to think of Chrome extension development is like full-stack web development

You have the back-end that…

I was fussing about how to display copy in one of my React components.

Instead of dealing with HTML divs, paragraphs, images, **tables**, etc.

I found a way to just import the .md (markdown) files I already have.

This process involves:

• markdown-to-jsx
• light knowledge of React state management & life-cycles; we’ll use hooks here
• light knowledge of the JavaScript Fetch API (very light knowledge, don’t worry)

The first thing we’ll need is to organize the markdown files.

I’ve chosen to store the .md files in a markdown folder in the src directory.

Mix and match your copy-write components. Writing, image galleries, and video.

Browse our Teachable courses.

We’ll build this webpage out of 6 components.

1. BlogPage.js — the main container for our posts

2. Post.js — a single blog post

3. WriteUp.js — a place to show your copy-write

4. Gallery.js — an image gallery

5. PrimaryAsset.js — a place to show a large print image or embed a video

6. Separator.js — a simple design to separate each blog post

All of the information displayed in a blog post will be seeded in through a feeder file.

This file will have the following schema:

[  {    title: ``,    subtitle: ``,    images: [``],…

We include a custom auto-play slideshow and custom navigation bar.

We’ll build this webpage in 5 main sections.

1. Section 1 — our product logo and an image gallery

2. Section 2 — information about our product

3. Section 3 — accolades about our product

4. Section 4 — opportunities to buy our product

5. Section 5 — contact information for our business

We’ll create a Home.js component to hold all of this code.

Section 1.

All we’re going to do here is create containers for our product logo & button, and image gallery.

We’ll deal with the details of the image gallery implementation later.

For now we position our logo and button on the page and place our image gallery behind everything.

<div className=”section1">  <div className=”container”>    <img src=”./images/reyna.png” alt=”” className=”splash_img” />    <img src=”./images/val-logo.png” alt=”” className=”splash_logo” 
     />    <div className=”sign_up”>…

Save the sites you browse in a Pinterest board.

This write-up assumes you know how to create a JavaScript Pinterest Clone from scratch. If you don’t know how, watch the tutorial here.

For this tutorial, we are simply upgrading the functionality of our JavaScript Pinterest Clone and integrating it into a Chrome Extension.

Part 1. Integration

Let’s go over our file structure.

We’ll start with the manifest.json.

{  “name”: “Pinterest Chrome Extension”,  “description”: “Pinterest Chrome Extension”,  “version”: “0.1.0”,  “manifest_version”: 2,  “icons”: {    “16”: “./images/icon-16x16.png”,    “32”: “./images/icon-32x32.png”,    “48”: “./images/icon-48x48.png”,    “128”: “./images/icon-128x128.png”  },  “background”: {    “scripts”: [“./scripts/background.js”]  },  “browser_action”: {    “default_popup”: “popup.html”  },  “permissions”: [    “tabs”,    “storage”,    “unlimitedStorage”,    “https://*/*png",    “https://*/*jpg",    “https://*/*jpeg",…

Let’s get the skeleton for our component written up. We’ll be using ‘react-router-dom’ and font awesome for this project.

<div className=”nav_bar”>  <div className=”icon_container menu_switch”>  </div>  <div className={`nav_container`}>    <div className=”icon_container logo”>    </div>    <ul className=”menu_items”>    </ul>  </div></div>

We have a place for our open/close menu button, a logo, and the menu with links to different pages.

Opening and closing our menu

When the user clicks our menu button, we’ll open or close our menu depending on the current state of the menu.

We’ll have a piece of state called showMenu to manage this.

const [showMenu, setShowMenu] = useState(false);function switch_menu() {  setShowMenu(!showMenu);
}

When showMenu is…

We’ll build this webpage in 3 main parts:

1. Top — the greeting for our customer

2. Middle — a place for information about our business’ mission

3. Bottom — a footer for information about our business

We’ll create a Home.js component for our main page.

The Top

All we’re going to do here is set an image for our background and title for our company.

The image gallery comes later; it’s a separate element that we float around our page depending on the dimensions.

<div className=”section1">  <img src=”./images/background-section1.jpg” alt=”” 
    className=”background_image_section1" />  <div className=”title”>Sinclaire<br />Market</div></div>

This is our result:

We’ll build this webpage in 3 parts:

1. Top — the greeting for our customer

2. Middle — a place for information about our business’ mission

3. Bottom — a sign-up option and footer for information about our business

The Top.

All we’re going to do here is set a bunch of images in place and write a greeting.

<div className=”section1" ><img src=”./images/space.png” alt=”” className=”space-background”/><img src=”./images/earth.png” alt=”” className=”earth”/><img src=”./images/rocket.png” alt=”” className=”rocket-ship”/><img src=”./images/planet1.png” alt=”” className=”planet1"/><img src=”./images/satellite.png” alt=”” className=”satellite”/><div className=”greeting”>[Welcome]</div></div>

It’s important in the CSS styles for all of these images that we make sure they have a position of ‘fixed’ and are positioned using the ’top’ property.

This important for later when we use our Parallax HOC Wrapper to make these…