How to use GHC plugin to save any part of a webpage as pure css component?

Jinling Xi — Thu, 27 Jun 2024 08:34:51 +0000

1. Install GHC plugin

GHC plugin is availabe on both Chrome and Edge store.

Install GHC plugin from Chrome store here.

Install GHC plugin from Edge store here.

2. Signup and login

Open GHC official website: 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 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.

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.

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.

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

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.

Next, right click on the element, select copy, select selector.

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.

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.

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!

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.

DEV Community: Jinling Xi