How to use GHC plugin to save any part of a webpage as pure css component?
Published: 2024-06-27 08:34:51

### 1. Install GHC plugin
GHC plugin is availabe on both Chrome and Edge store.

Install GHC plugin from Chrome store [here](https://chromewebstore.google.com/detail/ghc-extract-only-user-def/hodhbkgjfpldkenndcnhiampijbhbkdo).

Install GHC plugin from Edge store [here](https://microsoftedge.microsoft.com/addons/detail/ghc-extract-only-userd/gkngieddelocicaipeelmgggamekjobi).

### 2. Signup and login

Open GHC official website: [https://www.gethtmlcss.com](https://www.gethtmlcss.com)

Click the `Login` button on the top-right corner to navigate to login page.

#### 2.1 Signup and login by google auth
On login page, click google button to login. If you are first time to come, an GHC account related to your google account will be created.

#### 2.2 Signup and login by email
On login page, click `register` to navigate to signup page.

On signup page, input a valid email adress, nickname and password, and then click `Submit`. You will receive an activation link in your email inbox.

Check you email inbox, click the activation link, then a GHC account will be created successfully.

Visit [GHC login page](https://www.gethtmlcss.com/login) again, input the email and password to log in.

### 3. Get started

#### 3.1 Enable GHC plugin on website

Open any website such as [google](https://www.google.com).

Click the GHC button on the right of Chrome/Edge toolbar.

Select `All sites` and click `Apply Change`, then a `GHC` button will be shown on the page.

![image](https://assets.ghcviewer.com/063f71-6a2b433794d5.png)

#### 3.2 Copy css selector of target part

if you want to save any part of the current page, the first thing is to find its css selector.

Click blank position of the page to open Devtools.
![image](https://assets.ghcviewer.com/063f71-e091f3362d6b.png)

Click the `Inspect` icon of `Elements` panel of Devtools to activate inspecting function of the browser.

![image](https://assets.ghcviewer.com/063f71-d18c5aa1285c.png)

Suppose we are interested in the searchbox of google home page. We can finally find the DOM position by Inspecting the page or just click on the elements in Element panel. That is `<div jsname="RNNXgb" class="RNNXgb">` as follows.

![image](https://assets.ghcviewer.com/063f71-8d7436ebae4f.png)

Next, right click on the element, select `copy`, select `selector`.
![image](https://assets.ghcviewer.com/063f71-927972b63127.png)

Now, we alrealy get the target css selector in clipboard.

#### 3.3 Get target code

Hover on the GHC button on the right, the whole GHC panel will be shown.

Paste in the CSS Selector input, then click the `Get Code` button on the bottom of GHC panel.

![image](https://assets.ghcviewer.com/063f71-9c0c60518856.png)

Remember keeping the Devtools open all the time.

#### 3.4 Preview in GHC website

When `Get Code` is done, a GHC project will created and opened automatically in a new page.

![image](https://assets.ghcviewer.com/063f71-7b00c11170ce.png)

On the right, we can see the google searchbox.

On the left, we can see html and css source code created by GHC plugin.

if we take a deeper look, we can know that all classname is renamed and every html node has a unique new css rule correspondingly and the css rule contains user-defined css from original website!

![image](https://assets.ghcviewer.com/063f71-de30ce1749f6.png)

#### 3.5 Preview in Codepen or download to computer

When `Get Code` is done, all records are listed below. Click the Codepen button, and you can preview the code in Codepen website. You can also click the download button besides Codepen button to download source code as a zip file.

![image](https://assets.ghcviewer.com/063f71-1a07cd213a08.png)