How to parse data with chrome extension? With Extension Guide!

Extensions are small software programs that customize the browsing experience. They enable users to tailor Chrome functionality and behavior to individual needs or preferences. They are built on web technologies such as HTML, JavaScript, and CSS.

First of all, we need manifest. What is the manifest? Manifest is important for your extension as it provides enhancements in security, privacy, and performance.

It has a name, information, version of the extension and it tells which permissions it needs.

{
   "name": "My First Extension",
   "description": "Build an Extension for parse date from website!",
   "version": "1.0",
   "manifest_version": 3,
   "background": {
      "service_worker": "background.js"
   },
   "permissions": ["storage"],
   "icons": {
      "16": "icon-16.png",
      "48": "icon-48.png",
      "128": "icon-128.png"
   },  
   "content_scripts":[
      {
         "matches":["https://cloudnesil.com/*"],
         "js": ["content.js"]
      }
   ]
}

• If you want to contain all URL, you may use "<all_urls>"

Then we will need to create a background script. The background script must also be registered in manifest.

We can think of a background script as a background worker. If we don’t create a background script, the extension will be missing instructions. It has many different listeners. For example, when clicking the button, the background script will be triggered.

We used onInstalled. It is triggered when the extension is first installed, when the extension is updated to a new version and when Chrome is updated to a new version.

chrome.runtime.onInstalled.addListener(() => {
   console.log('Extension is running!');
});

Content script runs in the context of web pages. It can interact with the web pages. We will do the parse here.

You can parse data with querySelector, id, className… We will parse with querySelector and fix data with regex.

let brand = document.querySelector('#productDetails_techSpec_section_1 > tbody > tr:nth-child(1) > td').textContent.replace(/\n/g, '')
let model = document.querySelector('#productDetails_techSpec_section_1 > tbody > tr:nth-child(3) > td').textContent.replace(/\n/g, '')
let modelYear = document.querySelector('#productDetails_techSpec_section_1 > tbody > tr:nth-child(4) > td').textContent.replace(/\n/g, '')

let myObject = {
   brand: brand,
   model: model,
   modelYear: modelYear
}
chrome.storage.local.set({key: myObject}, () => {
   console.log('Value is set to ' + myObject);
});

Now that the data is ready, I can save it to my local storage. But if you want, you can post data anywhere.

Finally, import extensions into your browser:

1. Go to chrome://extensions in the target Chrome browser and enable "Developer mode" by the checkbox in the upper right.
2. Press “Load unpacked extension…” and choose the version-number folder inside the desired extension folder.

REFERENCE

If you want more information:

https://developer.chrome.com/docs/extensions