Forem: Ahmad Ali

chrome-extension anatomy and how its parts communicate

Ahmad Ali — Sat, 21 Nov 2020 19:13:27 +0000

there are lots of resources out there talking about extensions. here is one chart that contains every single layer and the relationships between them.

chrome extension contains 6 important files:

manifest.json: organises the extension structure ( somehow similar to package.json).
background script: this resource is shared between all browser windows and every element inside them (so changing a value in the background will change it everywhere on the browser instantly).
popup script: contains the markup that the extension displays when you click on its icon, it is containable in the single tab, does not have access to the extension background or page content but it can communicate with them through messages as:
a. chrome.runtime API to communicate with the background.
b. chrome.tabs API to communicate with its tab.
content scripts: it is containable in the page window so it has access to the page DOM, it does not have an actual effect on the extension itself unless it starts communicating with the background and popup scripts through messaging events.
options script: this is a special file that allows you to give the user some options in order to personalise their extension as they want, any piece of option can be saved to the chrome.storage.local and can be synchronised between multiple browsers where the user logged in to chrome using chrome.storage.sync.
icons files: should be in sizes like 16*16 and 32*32px, the paths to those files should be specified in the manifest.

Communication between different scripts:

1. `From everywhere to background scripts and vice versa:`

you can use ** chrome.runtime.sendMessage()** or any other runtime events, you need an eventListener in the background, which in turn will handle the request and dispatch its response everywhere.

and in order to receive that message (or response) you need another eventListener on the other script listening to the runtime events.

2. `From popup to content and vice versa:`

you can't communicate directly between those 2 scripts. since both scripts can communicate with the background we can use it as middleware between them or we can use the tabs API.

first: background as middleware

you can use chrome.runtime API to exchange messages between the script you are in (popup or content) and the background using the chrome.runtime.sendMessage(), the background will send its response to everywhere.
in order to receive the message, you need to listen to it on the other script itself.
so:

you send a message from popup to the background.
background will handle the request and send its response to everywhere.
both popup and content scripts are containable in everywhere (check the chart).
you can listen to that response either in popup or content or both, so you received the message.
done !!

second: create a connection between popup and content through the tab

you can use chrome.tabs API to create a connection between the popup and the content script using the chrome.tabs.connect() and then postMessage through the tab background.
in order to receive the message, you need to listen to it on the script itself.
so:

you open a port between popup and content through the tab background.
you send a message through that port to the tab background.
tab background will redirect it to the content script which will handle the request and send it through the same port to the popup.
you can listen to that response either in the popup, so you received the message.
you can close the port, or leave it open to send other messages.
done !!

site views counter tutorial

Ahmad Ali — Thu, 27 Feb 2020 14:21:53 +0000

new tutorial Site views counter with Node and MongoDB javascript

https://www.youtube.com/playlist?list=PLrMI74uzoMfm4fFCCJvLrpYtV4U1A-6Kj

Connecting your App to MongoDB Atlas .. Important Notice

Ahmad Ali — Mon, 13 Jan 2020 18:39:21 +0000

When you are using MongoClient to connect to MongoDB Atlas, it is important to know that there are 3 layers of connection.

1- connect to the cluster ..


mongo.connect(process.env.DATABASE_URL, (err, db) => {
  if(err) {
    console.log('Database error: ' + err);
  } else {
    console.log('Successful database connection');
  }
});

using the code above will not deliver you to the database, although you will not get any errors, you will find that your operations on the database-collection are not successful.
again, there is no errors in this connection, so you won't understand why your interaction with the DB is not successful.

2- connect to the database:


//DB and authentication
mongo.connect(process.env.DATABASE, (err, cluster) => {
  if(err) {
    console.log('Database error: ' + err);
  } else {
    //connecting to the cluster
    console.log('Successful database connection');

    //connetcing to the database
    const db = cluster.db(DATABASE_NAME);
  }

 });

in the code above, the

connection.db() or cluster.db()

function -if you want to think of it this way- to connect us our database.

3- connect to the collection :


//DB and authentication
mongo.connect(process.env.DATABASE_URL, (err, cluster) => {
  if(err) {
    console.log('Database error: ' + err);
  } else {
    //connecting to the cluster
    console.log('Successful database connection');

    //connetcing to the database
    const db = cluster.db(DATABASE_NAME);

   //conneting to the collection
   const coll = db.collection(COLLECTION_NAME);

   //do your stuff on the collection here.

  }
});

in the code above we reached our collection, so we can do our operations on it correctly.

remember to put all of the code that is doing operations on Database inside the MongoClient connection.

Happy Coding..!!

visits counter to a website using Express.js, MongoDb

Ahmad Ali — Thu, 02 Jan 2020 16:26:59 +0000

Website visits Counter can be a vital way to analyze the trafiic that your ebsite encounters.

you can acsess source code on github here

although you can accsess your website statistics with the built-in functions and data that your service provider gives to you, it still a good practice to show your coustomers the amount of traffic that reaches to your website.
you can show the number of visits to every single page in your website, but I am going to keep things simple and implement a visit counter for the index page only, and I am going mention how to expand this counter to other pages.
this toturial suppose that you have got Node, MongoDb installed on your machine, otherwise just google the and install them on your machine.
first things first, let’s talk a bit about the technologies that we are going to use in this project. we need to use:
1- Express-Generator: a server to do your logic.
2-MongoDb: for data storing.
3-Mongoose: for interacting between the server and database.
4-EJS Embedded JavaScript templating: for fetching the data from your database and show them in your views.

1- installing express-generator:
Express Generator is a quick way to scaffold your App and buiuld it’s skeleton.
we are going to install express-generator using this command:

this command will install the generator globally so can use it in any folder. now make a new folder and call it what ever you want , and then open it in a termenal and type “express” and then type “npm install” so all the default libraries will be installed automaticly , and then you’ve got your App scaffolded as shown on the photo:

2- Installing mongoose :
in your terminal just type “npm install mongoose”, and you will notice that mongoose have been added to your package.json
3-Connecting Mongoose to your Database:
first we need to create new mongoose model, which is a form of represnting a MongoDb collection on your code.
open a new terminal and type “mongod” → this command will switch on your MongoDb server and you have to keep it up and runnig while you work, you will get a lot of text as shown on the photo :

now, keep that terminal running and go to your code, let us make a new directory and call it models, then create a new file and call it “visits.js” and type the following code in it:

in this file we required mongoose so we can acsess the functionality of this library and one of them is Schema whitch defines the structure of the new collection that we will create whitch can be acsessed by calling the model in our code. then we export visits.js
now open a new termenal and type “mongo”, type “use confusion” → this command will create a new database if it not existed and then will use it on the terminal shell .. now type ..

then insert a new document inside ‘visits’ collections and show them using this commands:

save that id because we are going to use it later.then we are going to make a new direction inside our App directory called src/visitsUp.js and then we create a file called visitsUp.js and put the following code inside it:

in this file we have defined a function called sitevisitsUp that will use the mongoose findByIdAndUpdate function to update the visit counter property inside our database. we used the _id property of the document that we have created. and we use the mongoose expression $inc to increase the counter by one.
now lets go to routes/index.js and update it with the following code:

in this code we have called the function siteViewsUp every time the server faces a get request. then we find this document and pass it’s counter property to render() function → this way we can acsess this value inside our index.ejs whitch will be rendered when we make a get request to main route (server/).
now, lets update our app.js file:
first, we need to connect our App to mongoDb server using mongoose.connect() function whitch takes the url for the database as an argument.

then we are going to change the views engine so we can render ejs files, which will be our next topic:

4- rendering EJS files:
EJS is a simple templating language that lets us generate HTML markup with plain JavaScript. so It’s just plain JavaScript.
in the terminal type “npm install ejs”, so you can use it.
lets go to viewsfolder and make a new file views/index.ejs and type the following code:

the way the ejs files work is that you pass data as an object inside your render() method , and then you can acsess this data by typing js code inside <%= %> tag while the rest of the document is palin html.
now type “npm start” to start your server then go to http://localhost:3000/ you will find somethimg like this:

each time you refresh the page the counter will increases automaticlly.
Now you have implemented a visit counter for index page , in order to expand this to other pages you have many ideas one of them is to add another field in your database so you can use different counter for each page and that’s why I have implemented siteViewsUp in a seprate file so you can import it when needed.
I am going to write another post for different counters in the future.