DEV Community: Pavel Bucka

Learn the most useful Chrome APIs by creating Block Site Chrome extension

Pavel Bucka — Thu, 30 Jul 2020 12:50:35 +0000

This article will explain you how to use the most useful Chrome APIs by creating a simple Chrome extension called Block Site.

Agenda:

the APIs you will learn in this tutorial are called "storage" and "tabs"
the full list of APIs available to Chrome extensions is here
Block Site, which we are about to create to learn and practice the two APIs, is available here

Introduction

Block Site is a simple Chrome extension that improves your productivity by blocking the access to time-consuming websites (like during the working hours) as you specify in Options. Block Site is by default disabled and doesn't block any website until you say so in Options.

Options refers to "options_page" which the extension can have. To open Options, generally you right-click on the extension icon in the toolbar and choose Options from the menu. The same will apply to Block Site.

"storage" API will be needed to store the websites user wants to block the access to, to boost his productivity, and it will also be used to store an option to quickly disable or enable the blocking at any given moment.

"tabs" API will be needed to get the tab url we are trying to open, and based on whether the domain is on the blocked list or not, we close the tab instantly, or let it proceed.

Let's now create the extension Block Site.

First steps

$ mkdir block-site
$ cd block-site
$ touch manifest.json

We have now created a new folder called block-site and prepared a file manifest.json which every extension has to have.

Update manifest.json to contain following:

{
  "manifest_version": 2,
  "name": "Block Site",
  "description": "Blocks access to time-consuming websites (as you specify) to improve your productivity.",
  "version": "1.0",
  "options_page": "options.html",
  "permissions": ["storage", "tabs"],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  }
}

The structure of this file is explained here. Any other fields besides "manifest_version", "name" and "version", are optional and we add them as needed.

Explanation:

"options_page" is a page to open when you right-click the extension in the toolbar, and select Options from the menu. In our case, we will use this page to set a list of websites to block, and also to easily enable/disable the blocking.
"permissions" lists permissions needed by the extension. It can be requesting API access as in our case, or also a match pattern. More about possible options here. Permissions are requested by the extension when installing. Based on the requested permissions, Chrome may display a warning as explained here.
"background" sets the script to be run in the background. In our case, it will be a place where we put the main logic to stop the blocked websites from opening. Because Chrome extensions are event-based, background script is a good place to put event-based scripts, especially if they don't require an UI (like blocking the websites). It's also a good place to put any heavy calculation that could slow down the UI. As you can see, the background is set to be no persistent. That means, when not needed, the script is unloaded from memory. More about background scripts here.

Create Options page (use "storage")

Create options.html and give it a simple markup like this:

<!DOCTYPE html>
<html>
<head>
<title>Block Site</title>
</head>
<body>

<h1>Block Site</h1>

<textarea id="textarea" rows="10" cols="30" spellcheck="false"></textarea>
<br>

<button id="save">Save</button>
<strong>Enabled?</strong><input id="checkbox" type="checkbox">

<script src="options.js"></script>
</body>
</html>

The UI is pretty simple. We have 3 elements:

#textarea to specify the websites to block
#save button to save the modified #textarea
#checkbox to enable or disable the blocking

Create options.js and give it this content:

const textarea = document.getElementById("textarea");
const save = document.getElementById("save");
const checkbox = document.getElementById("checkbox");

save.addEventListener("click", () => {
  const blocked = textarea.value.split("\n").map(s => s.trim()).filter(Boolean);
  chrome.storage.local.set({ blocked });
});

checkbox.addEventListener("change", (event) => {
  const enabled = event.target.checked;
  chrome.storage.local.set({ enabled });
});

window.addEventListener("DOMContentLoaded", () => {
  chrome.storage.local.get(["blocked", "enabled"], function (local) {
    const { blocked, enabled } = local;
    if (Array.isArray(blocked)) {
      textarea.value = blocked.join("\n");
      checkbox.checked = enabled;
    }
  });
});

We can see chrome.storage.local being used, which is made available by having the "storage" permission.

When we click on #save, we save the list of blocked sites in #textarea under the key blocked. Before saving them, we remove any empty lines or trailing whitespaces.

Example on how the list of blocked sites in #textarea can look like:

facebook.com
instagram.com
youtube.com
twitter.com
reddit.com

When we click on #checkbox, we save the boolean under the key enabled, to tell if the blocking should be enabled or not.

When the page is loaded, we read blocked and enabled, and set the UI accordingly.

A closer look on "storage"

Using "storage" made chrome.storage.local available, but what is it actually? And is that all?

It turns out, "storage" gives us access one step further, to chrome.storage which is documented here.

chrome.storage is similar to localStorage, in terms of its API and storage limitations. The main benefit comes from it being asynchronous and having an onChanged listener that can be used to synchronize the UI or otherwise react to changes in data.

chrome.storage gives us 3 storage areas:

chrome.storage.local that is best for storing the data locally
chrome.storage.sync that supports to store and synchronize (although very limited in size) the data across other computers where the extension is installed and same Google Account is used
chrome.storage.managed which is like read-only area for administrator purposes only

The most commonly used storage out of these three is chrome.storage.local.

The most common methods across these storages are get, set, and remove. See the documentation here.

Create Background script (use "tabs")

Now when we have the Options page ready, which can set blocked (array of websites to block) and enabled (boolean if blocking should be applied or not), it is time to work with these in the background.

Create background.js and give it this content:

chrome.runtime.onInstalled.addListener(function () {
  chrome.storage.local.get(["blocked", "enabled"], function (local) {
    if (!Array.isArray(local.blocked)) {
      chrome.storage.local.set({ blocked: [] });
    }

    if (typeof local.enabled !== "boolean") {
      chrome.storage.local.set({ enabled: false });
    }
  });
});

chrome.tabs.onUpdated.addListener(function (tabId, changeInfo) {
  const url = changeInfo.pendingUrl || changeInfo.url;
  if (!url || !url.startsWith("http")) {
    return;
  }

  const hostname = new URL(url).hostname;

  chrome.storage.local.get(["blocked", "enabled"], function (local) {
    const { blocked, enabled } = local;
    if (Array.isArray(blocked) && enabled && blocked.find(domain => hostname.includes(domain))) {
      chrome.tabs.remove(tabId);
    }
  });
});

At the top we can see chrome.runtime being used. More about this API here. List of all available APIs here. And list of all possible permissions here.

As we can see, not every API requires a permission. Some APIs are generally available in extensions, like chrome.runtime.

chrome.runtime.onInstalled.addListener calls a given callback any time the extension is installed or updated. What we do here, we simply check if blocked and enabled are of a correct format, and if not, we reset them.

The more interesting, is the use of chrome.tabs. Most of this API is generally available as well.

A closer look on "tabs"

chrome.tabs which is described here, opens many options like creating a new tab, updating an existing tab, or reacting to various events about tabs. Most of the API is generally available, and doesn't require a "tabs" permission.

We are using "tabs" permission to get the access to url and pendingUrl inside the onUpdated event. This way, we can detect if the address we try to open matches any website from the blocked list, and if yes, we close the tab instantly as a way of blocking the access.

pendingUrl is quite new (available since Chrome 79), and it captures the url we indent to open before the tab committed to it. pendingUrl precedes url. url is more like a fallback. One tab can go through many events.

To close the tab that would navigate to a blocked site, we use chrome.tabs.remove and provide it with a tabId.

Testing Block Site

Block Site is now ready to test.

Open chrome://extensions in a new tab and navigate to block-site folder to load the extension. If no errors were made, extension should be successfully loaded.

Open any website you'd like to block, see that it works as usual.

Now, right-click on Block Site icon and select Options to open. Type in the website you would like to block and hit Save and Enabled.

Now, try to open the blocked site again. It should not be possible! Try disabling the blocking via Options and playing around with the used APIs by checking the values from the console.

Thank you very much for reading the article. I hope you enjoyed it and it left you full of excitement to continue learning. Cheers!

A summary of used resources:

Manifest file
List of all Chrome APIs
Chrome Runtime API
Chrome Storage API
Chrome Tabs API
All possible permissions and all possible warnings related to them
All about Background scripts
Block Site on GitHub - give it a like pls! :)

Here are the extensions I made on Web Store:

A simple way to detect if your JS App is online/offline/or having a slow connection (+ Alerts, + Emulating the slow Internet)

Pavel Bucka — Mon, 22 Jun 2020 19:56:01 +0000

In this article, we will cover 3 things:

How to detect your JS application (it can be SPA, PWA, Electron, or plain JS) is having a troubled connection (slow, offline), when it gets back online and how to re-download the data without a page refresh (in case it hasn't got enough time to finish while online).
Creating a simple JS application that downloads and displays a picture, where we would cover all the cases from a previous step.
Learning how to throttle the Internet connection in Chrome, and test the application we created.

Step 1.

To detect if the application got offline, or back online, is quite simple:

window.addEventListener("offline", () => {
  console.log("I am offline.");
});

window.addEventListener("online", () => {
  console.log("I am back online.");
});

If you are building a Chrome extension that requires the Internet connection, for example to upload a file to Google Drive, you can leverage following:

if (!navigator.onLine) {
  return false;
}

// Upload the file...

To detect if the application is loading for too long, can be done by creating a timer and giving it a time, after which we assume the connection is slow, if not loaded yet. After the application is loaded, we reset the timer. Here's an example code:

// Our simple App
const App = async (onstart, onload) => {
  onstart();

  // Loading...

  // The application is now loaded
  onload();
}

let isSlow;
let loaded;

App(
  () => {
    isSlow = setTimeout(() => {
      console.log("Thing are getting slow...");
    }, 10000); // 10 seconds
  },
  () => {
    clearTimeout(isSlow);
    loaded = true;
    console.log("Loaded.");
});

The logic by which we decide if the application is loading for too long, depends on our app.

Now, we can proceed to the next step.

Step 2.

We will now create a simple app, that will load a random picture from https://picsum.photos. If the Internet connection will get slow, offline, or back online, we will display a particular message:

The app will look like this:

The message will be displayed in the top center when needed. To make the loading of an image visually nicer, it will have a pulsing effect to it.

Let's start by creating index.html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>App</title>
  <link rel="stylesheet" href="app.css">
</head>
<body>
  <div id="slow" class="message">Slow Internet Connection.</div>
  <div id="offline" class="message">No Internet Connection.</div>
  <div id="online" class="message">Back Online.</div>

  <div id="app"></div>

  <script src="app.js"></script>
</body>
</html>

Continue by creating app.css:

body {
  margin: 0;
  padding: 4em;
  font-family: Arial, Helvetica, sans-serif;
}

@keyframes pulse {
  0% { background-color: #f1f1f1; }
  100% { background-color: silver; }
}

img {
  width: 640px;
  height: 480px;
}

img.loading {
  animation: pulse 1s ease-out alternate infinite;
}

.message {
  position: fixed;
  left: 50%;
  top: 0;
  font-size: 2em;
  font-weight: bold;
  padding: 1.5em;
  transform: translate(-50%, -100%);
  transition: transform .25s;
}

#slow {
  background: #FF9800;
  color: white;
}

#offline {
  background: #E91E63;
  color: white;
}

#online {
  background: #4CAF50;
  color: white;
}

body.slow #slow,
body.offline #offline,
body.online #online {
  transform: translate(-50%, 0);
}

Messages (or Alerts) have different color each, and are off the screen when not needed. When required, the message slides in from the top center.

And finally, create app.js:

// Simple App that loads a picture.
const App = (onstart, onload) => {
  onstart();

  const h1 = document.createElement("h1");
  h1.innerText = "App";

  const img = document.createElement("img");
  img.src = "https://picsum.photos/640/480";
  img.className = "loading";
  img.onload = () => {
    img.className = "";
    onload();
  };

  const app = document.getElementById("app");
  app.innerHTML = "";
  app.append(h1);
  app.append(img);
}

let isSlow;
let loaded;

const loadApp = () => {
  App(
    () => {
      loaded = false;
      isSlow = setTimeout(() => {
        // Show "Slow Internet Connection." message.
        document.body.className = "slow";
        console.debug("slow");
      }, 1500); // Intentionally a low number for testing. Try some different values here, or play with different Internet Throttling setting.
    },
    () => {
      loaded = true;
      clearTimeout(isSlow);
      setTimeout(() => { document.body.className = ""; }, 1000); // Hide message after 1s.
      console.debug("loaded");
  });
};


// We are "offline".
window.addEventListener("offline", () => {
  // Show "No Internet Connection." message.
  document.body.className = "offline";
});


// When we back "online".
window.addEventListener("online", () => {
  // Show "Back online" message.
  document.body.className = "online";
  console.debug("online");

  // Hide message after 1s.
  setTimeout(() => { document.body.className = ""; }, 1000);

  // There was not enough time to load the App. Do it again.
  if (!loaded) {
    console.debug("Reconnecting...");
    loadApp();
  }
});


window.addEventListener("DOMContentLoaded", loadApp);

This simple App will load a picture and display it. While the picture is loading, it will have a .loading class added, to show the pulse effect. After the image is loaded, the .loading class will be removed, and the timer will be stopped. If the loading took longer than we specified, Slow Internet Connection. message will be shown.

If the Internet is off, No Internet Connection. message will be displayed, and once back online, Back Online. message will be displayed.

In case the picture wasn't loaded before we got offline, it will be loaded once again we are back online.

Step 3.

Time to test our App under different network conditions. Open Chrome -> DevTools -> Network, look for Throttling section and click Add....

Define 2 new Throttling profiles as seen below:

A random picture we are about to display, can range anywhere from 20KB to 80KB in size, that means, in Very slow profile that would take about 5 seconds to load, in Incredibly slow profile about 30 seconds. We basically adjust the speed to the size of content, to get a good testing.

Now, open index.html with the DevTools open (to have Throttling applied), keep refreshing the page with different initial Throttling setting (Online, Offline, Very slow or Incredibly slow), and try changing the profile while the page is loading (from Offline to Online; from Incredibly slow to Offline to Online; etc.).

It can look like this:

That's it. I hope you enjoyed the article and had fun!

And. Thank you for reading! 🙂

Create your first awesome Chrome Extension in just 5 minutes! 🔥🔥🔥 (FAQ included 🤔 => 😊)

Pavel Bucka — Thu, 18 Jun 2020 13:50:24 +0000

In this post, you will learn how to create your first chrome extension, install it in every major browser, and get the basis that will guide you next!

The extension we are about to create, will show a random joke. The name of the extension will be, Joker.

Step 1

Prepare a new folder joker. Start by creating manifest.json. It is a file that is required by any extension. It's the entrypoint. Put the following content into the file:

{
  "manifest_version": 2,
  "name": "Joker",
  "description": "Why so serious?",
  "version": "1.0",
  "icons": { "128": "joker.png" },
  "browser_action": {
    "default_icon": "joker.png",
    "default_popup": "popup.html"
  }
}

Most things are self-explanatory.

Let's look more closely at "browser_action". This specifies, that the extension will open a popup once we click on the extension icon, which will be added to the browser's toolbar after the extension is installed. In the popup, we will display a random joke.

To see the full list of possible attributes, that you can specify in this file, see here.

Let's continue now by creating the files we specified in the manifest.

Step 2

Open flaticon and look for an icon you would like to use for the extension. Make sure the icon is of size 128, png format. Save the icon as joker.png.

Step 3

Create popup.html with the following content:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Joker</title>
  <link rel="stylesheet" href="popup.css">
  <script src="popup.js"></script>
</head>

<body>
  <div id="joke"></div>
  <div id="one-more">Haha, one more!</div>
</body>

</html>

Step 4

Now, create popup.css and make it pretty! 💁‍♀️

body {
  margin: 0;
  padding: 1em;
  min-width: 350px;
  background: #9550bb;
  color: white;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-size: 12px;
}

#joke {
  font-size: 3em;
}

#one-more {
  display: inline-block;
  cursor: pointer;
  font-size: 1.5em;
  margin-top: 1em;
  border-bottom: 2px solid;
}

#one-more:hover {
  border-bottom-color: transparent;
}

Step 5

Create popup.js, the last file we need.

const getJoke = async () => {
  const joke = await fetch("https://icanhazdadjoke.com", { headers: { "Accept": "application/json" } })
    .then(response => response.json())
    .then(json => json.joke)
    .catch(() => "No Internet Connection");

  document.getElementById("joke").innerHTML = joke;
}

document.addEventListener("DOMContentLoaded", () => {
  getJoke(); // initial joke
  document.getElementById("one-more").addEventListener("click", getJoke);
});

Step 6

Check that you have all the files. See http://github.com/penge/joker for reference.

You should have:

- manifest.json
- joker.png
- popup.html
- popup.css
- popup.js

Step 7

It is time to try the extension in every browser!

Chrome:

Open chrome://extensions
Click Load unpacked (click Developer mode if you don't see the button)
Open folder joker

Firefox:

Open about:debugging#/runtime/this-firefox
Click Load Temporary Add-on...
Open any file in folder joker

Edge:

Open edge://extensions
Click Load Unpacked (click Developer mode if you don't see the button)
Open folder joker

Opera:

Open opera://extensions
Click Load unpacked (click Developer mode if you don't see the button)
Open folder joker

Step 8

Enjoy the extension! 🙂

FAQ

1. Will my extension work on any OS? Any browser?

Your extension will work on any common OS (Windows, Linux, OSX, Chrome OS) and any Chromium-based browser (Chrome, Edge, Opera) that supports Extensions API, or Firefox, which is compatible to a large extent when using WebExtensions API (a common API). Minimal to no changes should be needed to make it compatible, and look the same elsewhere.

2. What are some good resources to start?

You will be pretty good to go with:

3. Where can I get some inspiration? What to create? What is possible?

Check the list of all Chrome APIs, that will give you a good overview about the available APIs, and also the sense of what they can do, and you can create based on.
Check Manifest File Format Summary, as this is the main file in every extension.

4. What is the folder structure?

Every extension needs to have manifest.json in the root. Any other files can be organized in any way you like.

5. How to publish the extension? How does it work?

Every browser has the store:

Chrome Web Store ($5 one time fee; slow reviews)
Firefox ADD-ONS (no fee)
Edge Add-ons (no fee)
Opera addons (no fee; instantly published)

You then pack your extension (zip or crx) and submit it for a review. When approved, it is published.

6. Is there a way to get the extension published faster?

Once the extension is in a pending review, you cannot interrupt or speed up that process (Web Store). What you can do, is to develop your extension in a certain way, that makes reviewing it much faster. Here are some tips:

have a good documentation, describe all the required and optional permissions, why they are needed, and what functionality they provide
avoid build step (no transpiling, minification, obfuscation), if possible

7. What are required and optional permissions?

Permissions allow the extension to use some useful APIs and build some features on top of them. Permissions are defined in manifest.json. The most common are "storage" and "tabs". See the complete list here.

Specifying the permission as Required means, it is needed at all times to function properly (or to provide the basic functionality). Optional permissions, on the other hand, are a good practice to say, these permissions are needed only when user turns on some additional functionality (through a Checkbox).

8. What is the best way to develop an extension?

There is no best way. Align the toolkit to what you need. It can be any of: JavaScript, JavaScript modules, Typescript, with dependencies, without, with bundler, without.

Benefits of not having a build step, are obvious: easier and faster to develop, debug, publish, review.

9. Where do I find some good icons?

See flaticon.

10. Does the extension have to have a popup? What other kind of UI is possible?

Popup is optional. Actually, any UI is optional. There may be an extension that has no UI at all!

Besides popup, other ways to display something, is in the new tab (like when the user clicks on the Toolbar icon), or override any new tab with some content.

Let's see how Joker can be improved!

more jokes (more APIs)
jokes by a category
offline jokes (json file)
save the joke to favorites (can view later)
share the joke (if from API)
themes

Thank you for reading! I hope you had great fun and learned something new! 🙂

Joker on GitHub
Joker on Web Store

Chrome Extension That Skips YouTube Ads (+Steps How To Create It)

Pavel Bucka — Thu, 02 Jan 2020 15:03:54 +0000

Recently I have created chrome extension called My Notes and as it received nice reviews, I have decided to create another one – Skip Ad.

I am also adding a tutorial this time, on how to create the extension.

Skip Ad

Skip Ad is a simple chrome extension that will skip YouTube ads for you, at https://www.youtube.com, so you can enjoy the content without interruptions.

I chose to create Skip Ad as it is something I would like to use personally, and is also simple to create, which makes it suitable to showcase how to create chrome extension.

After this article, you should not only have YouTube "without" ads but also be able to create chrome extension like this one.

Chapters

1 How to install Skip Ad
2 How Skip Ad looks
3 How Skip Ad works
4 How to create Skip Ad
- 4.1 Start by creating a new folder
- 4.2 Create manifest.json
- 4.3 Add icon
- 4.4 Install extension locally
- 4.5 Time to skip the ads
- 4.6 Setting content script
- 4.7 Reload the extension
- 4.8 Test the extension
5 Repository

1 How to install Skip Ad

The extension can be installed from the Web Store, a place where extensions are published.

Link:

https://chrome.google.com/webstore/detail/skip-ad/bimlffinhbdhgpomhngmnhidjgnfcnoc

2 How Skip Ad looks

Once the extension is installed, the following icon appears in the extensions list and the toolbar.

If you'd like to hide the icon from the toolbar, right-click the icon and select Hide in Chrome menu.

3 How Skip Ad works

After you open YouTube page, the extension will periodically check whether new ads are present and close them for you. If you already had some YouTube page open before the extension was installed, a simple page refresh will do.

The kind of ads that will be closed for you, and normally you would have to close manually by yourself, are shown below.

^^^ Video Ad can be closed with the Skip Ad button (single ad is shown), or Skip Ads button (multiple ads in the playlist).

^^^ Banner Ad can be closed with the X button.

Video Ad and Banner Ad can appear at the beginning of the video, or during the playback.

Buttons that are used to close the ad, are loaded with the ad, but in case of Video Ad, many times displayed after a delay. Skip Ad can skip the ad even before the button that closes the ad is shown. As a result, the ad may appear for a quick moment only.

4 How to create Skip Ad

4.1 Start by creating a new folder

We start by creating a new folder, to hold the extension files.

The name of the folder can be any. Usually, is the same as the name of the extension itself, just in kebab case (also called hyphen case).

Example: extension name Skip Ad => folder name skip-ad

Can two extensions have the same name, you might ask? The answer is yes.
Two extensions can have the same name, and the same code, still, they both can be installed because their unique ID will be different.

For learning purposes, let's call the extension differently – No More Ad.

Create a folder no-more-ad.

4.2 Create `manifest.json`

Every file we create from now on will go inside the folder no-more-ad.

Every extension has to have manifest.json file. How you name and organize the other files, that's up to you.

Create manifest.json with the following content:



{
  "manifest_version": 2,
  "name": "No More Ad",
  "description": "Skips YouTube Ads.",
  "version": "1.0"
}

Required keys: manifest_version, name and version. Anything else is optional. More at: https://developer.chrome.com/extensions/manifest.

You might be surprised, but at this point, we have an extension that can be installed locally.
It won't do anything though, just appear in the list of extensions.

4.3 Add icon

Download the icon from the repository and put it inside the no-more-ad folder.

Update manifest.json to assign the icon.



{
  "manifest_version": 2,
  "name": "No More Ad",
  "description": "Skips YouTube Ads.",
  "version": "1.0",
  "icons": { "128": "icon128.png" }
}

Now, as the extension has the icon, it will appear in the extensions list and the toolbar. You can try a different icon later.

4.4 Install extension locally

Although we have only manifest.json file, the extension can be installed already and as we update the code, it can be manually reloaded, which is also a way to test if nothing got broken.

To install the extension, open the Extensions list first, either via the menu or by entering chrome://extensions into the tab.

Now, click the Load unpacked button:

Navigate to no-more-ad folder and click OPEN.

After the extension is loaded, you should see the following card:

The orange icon indicates, the extension is installed locally.

If you have installed Skip Ad, disable it temporarily so it doesn't interfere with No More Ad.

4.5 Time to skip the ads

Buttons that are used to skip the ads (3 How Skip Ad works) have CSS classes that make them easy to find.

CSS classes:



// Video Ad; "Skip Ad" or "Skip Ads" button
"ytp-ad-skip-button-text"

// Banner Ad; "X" button
"ytp-ad-overlay-close-button"

The code to skip the ads will be fairly simple. It should look for the buttons that can close the ad, and if it finds them, trigger the click().

Create youtube.js now:



const click = (clazz) => {
  const buttons = document.getElementsByClassName(clazz);
  for (const button of buttons) {
    button.click();
    console.log("No More Ad");
  }
}

setInterval(() => {
  click("ytp-ad-skip-button-text");
  click("ytp-ad-overlay-close-button");
}, 300);
console.log("No More Ad - Init");

You can try the code by opening YouTube and paste it to the console. Then, check some videos. If the ad gets closed, you should see in the console:



"No More Ad"

The last step of the puzzle is to get this code to the YouTube page without manually pasting it, that is, via the extension.

4.6 Setting content script

Content script can be either css, or js, or both. It is a term that, in other words, adds or modifies (as it can access the DOM) the content of the page, where it is inserted.

In our case, we intend to insert earlier created youtube.js to the YouTube page.

This step is very easy, as it requires only to update manifest.json:



{
  "manifest_version": 2,
  "name": "No More Ad",
  "description": "Skips YouTube Ads.",
  "version": "1.0",
  "icons": { "128": "icon128.png" },
  "content_scripts": [
    {
      "matches": ["https://*.youtube.com/*"],
      "js": ["youtube.js"]
    }
  ]
}

We have defined, that any page that matches a YouTube page, should include youtube.js.

The content script defined via manifest.json, is injected declaratively, which means, automatically. It is the easiest way of inserting a script to the other page.

Another way how to inject the content script, is programmatically. It is more complicated, but also more customizable.

Content scripts run in an isolated environment, therefore, they cannot influence other scripts. What they can do, as mentioned above, is access the DOM. And that's exactly what we needed.

More about content scripts is here: https://developer.chrome.com/extensions/content_scripts

4.7 Reload the extension

The extension we installed in the step 4.4 Install extension locally requires to be reloaded, to apply the changes.

This is easy to do by clicking the reload button.

If everything went well, no Errors should be shown.

4.8 Test the extension

Now, it's time to test the extension. Open a new YouTube page, or reload the existing.

To see that the content script was inserted, visit Sources:

In the console you can see:



"No More Ad - Init"

Check some YouTube videos. What you should experience is, the ads are getting closed automatically.

Check the console again. For every ad that gets closed, you should see:



"No More Ad"

You have now successfully created your extension.

5 Repository

You can check the extension here:

https://github.com/penge/skip-ad

I hope you enjoyed the article and learned new.

If you have any questions, I will gladly answer them.

If you'd like to see more tips or tricks, or series on this topic, let me know.

Now, let's enjoy this extension and start 2020 with fewer ads!

Cheers!

Chrome Extension that turns your "New Tab" into a note taking tool

Pavel Bucka — Mon, 18 Nov 2019 10:16:38 +0000

Before

I am opening TextEdit, many times. Creating a new file, or maintaining one. All that just because of writing down some notes or text to copy. Need to save the file, sometimes forget to. I need to open the file. Need to switch between Chrome and TextEdit (or OneNote, you name it).

Sounds like enough of extra work for you? This is something I was trying to solve. So here it is.

Now

I have made a new Google Chrome Extension that makes copying multiple texts between pages so much easier, or writing down notes, todos, ideas. Every edit is autosaved and can be seen in other Chrome windows as well!

The name of the extension is My Notes. And what it does? It turns your "New Tab" into a note taking tool!

Some points

Great for Notes, Todos, sharing text (Copy/Paste)
It works immediately after you open a "New Tab"
Every edit and paste is saved (and waiting for you once you come back)
It is Synchronized across every Chrome window you have open

How it looks

Where to get it

https://chrome.google.com/webstore/detail/my-notes/lkeeogfaiembcblonahillacpaabmiop

Final words

I hope you will find this tool useful and it helps you be more productive.
If you have any suggestions, do not hesitate to send them.
Thank you!

Chrome Extension that stops your Social Media addiction

Pavel Bucka — Sat, 16 Nov 2019 10:07:17 +0000

Problem

How many times today did you type:

- f (as faceboook)
- t (as twitter)
- i (as instagram)
- y (as youtube)
- r (as reddit)

or other?

How many times today did you open a new tab, and subconsciously, without much thinking, you are on Facebook? Again.

Things that are easy to access, are hard to avoid. And, I have been in this trap too. Here is a solution I have been working on.

Help

I have created a Google Chrome Extension with a simple purpose.

- It prevents you from visiting social media. (you can also customize the list of sites)

- It handles your temptation of visiting social media. (or other sites you specify)

- It makes you more productive!

Where to get it

https://chrome.google.com/webstore/detail/stop-social-media/jdeohkoemlaidjgdhlcchdmgdghihjag

Final thoughts

Any feedback and any thoughts on this topic very appreciated!
Thank you!

How to write a blog in Maren?

Pavel Bucka — Mon, 11 Nov 2019 01:22:46 +0000

Introduction

Maren is a simple theme based static site generator.
Let's look first at these words, what they mean.

Simple (There are only 4 simple commands to know, you don't even have to remember them. Maren also doesn't force you to learn any conventions or rules, therefore, you're freer to focus on what's important, the writing.)
Theme based (Maren converts your blog, which is a basically set of Markdown files, to HTML, by using a Theme - this is an essential concept of Maren which we'll get back to later. It is nothing complicated or something to be worried about. Actually, it is an exciting playground!)
Static site generator (It means Maren can take care of creating your blog. You write the blog, but the final product, called the build, which you then upload to the Internet, can be created for you.)

Examples

First, let's see what we can achieve:

Maren

Maren as a name has 2 origins. Maren, at its core, is a theme based markdown renderer (might sound complicated, but isn't).
In those words you can see markdown renderer and therefore, a memorable Maren was born.

Maren also means "star of the sea" and comes from the Latin name Mary.
I considered that as a very nice name, also easy to remember, and type.

Creating our first blog

Get ready. Make yourself comfortable. Grab your favorite tea or coffee. I will now guide you throw the whole process of creating the blog!

The steps we will cover, are:
1) Starting a new blog
2) Writing the content of the blog (the most important part)
3) Previewing the blog (checking it looks and feels as we expected)
4) Uploading the blog so the whole Internet can see it!
5) Using your own theme!

Excited? Let's get started!

Step 1: Starting a new blog

It all starts by creating a new folder for our blog.

mkdir myblog
cd myblog

It's time to install Maren! (run the commands in our myblog directory)

npm init -y
npm install maren
npx maren init

Step 1 is almost done. And it couldn't be faster!

We have now myblog folder, installed Maren, and the blog is initiated by maren init we run. But, what does maren init do, you might ask?

It will simply prepare our blog to have the folder structure, that will guide us to organize our files nicely!
The content of our myblog should look like this:

~/myblog/documents
~/myblog/draft
~/myblog/static
~/myblog/themes
~/myblog/maren.json

What are those folders? Let's think about that in step 2!

Step 2: Writing the content

/documents => place to write our Markdown files!
/draft => place to put our unfinished work (Markdown files, text files, whatever!)
/static => place to put our images, music files, videos, simply any static content that is supposed to, stay static!
/themes => this folder is initially empty, but a whole thing can be going on once we dig into it. It is the place for our themes! Remember? Themes used to render Markdown files to HTML? Here they are.
/maren.json => A configuration file that can set the current theme, or plugins to use. It is an optional file (doesn't have to exist).

Let's write our first Markdown files, shall we?

To write Markdown files, you might use any editor you like! In our scenario, we simply put a few commands to get ready fast! And to make it even more interesting, there are two strategies to do so! Pick the one you like most! You can even combine them and use them simultaneously!

Strategy 1

echo "# My blog" > documents/index.md
echo "# 404" > documents/404.md

mkdir documents/article-1
mkdir documents/article-2
echo "# My first article" > documents/article-1/index.md
echo "# My second article" > documents/article-2/index.md

mkdir draft/not-yet
echo "# My draft" > draft/not-yet/index.md

Strategy 1 might work perfectly, it fully mirrors what you might expect to see at your website, as html file of course.

Strategy 2

echo "# My blog" > documents/index.md
echo "# 404" > documents/404.md

echo "# My first article" > documents/article-1.md
echo "# My second article" > documents/article-2.md

echo "# My draft" > draft/not-yet.md

Strategy 2 is more natural and helps to get around more easily once you have many files opened. As being said, you're free to use both strategies simultaneously to achieve your best!

Step 3: Previewing the blog

We are almost done! To preview the blog, we need to build it first.
To do so, run:

~/myblog $ npx maren build

This step will create a special folder named _build. It is a place where you'll find all html files, themes files, static files. But not drafts. Still though, you can preview the drafts using the local server!

To preview the blog, run:

~/myblog $ npx maren serve

# Serving at http://localhost:8080

That's it! Open the browser and try to visit:

http://localhost:8080
http://localhost:8080/any-random-url/
http://localhost:8080/article-1/
http://localhost:8080/article-2/
http://localhost:8080/not-yet/

Bonus: If you'd like to preview your blog and see your edits without restarting the server, simply, instead of maren serve, use:

npx maren watch

Step 4: Uploading the blog

Uploading the blog is unfortunately behind the scope of this article, but I will explain to you all the necessary steps.

To upload the blog, you probably wouldn't like to do it manually!
This is where plugins comes to play. One of these plugins is maren-s3 which provides an easy upload capability to AWS S3.

First, we need to install the plugin inside myblog:

npm install maren-s3

To enable the plugin, we might need to update maren.json, to make it look like:

{
  "theme": "",
  "plugins": [
    "maren-s3"
  ]
}

Then, we simply upload the blog by running:

npx maren upload myblog # name of our S3 bucket.

Step 5: Using your own theme

By default, a built-in theme is used, to get quicky running.
It is also a perfect fallback.

Now, it's time to boost things a bit and use some custom theme.
To do so, simply run inside your myblog directory:

git clone https://github.com/penge/maren-theme-default.git themes/default
(cd themes/default && npm install)

To use the theme, or to change the theme, we update maren.json, and make in this case, like this:

{
  "theme": "default",
  "plugins": [
    "maren-s3"
  ]
}

Then, run the build and server again!

npx maren build
npx maren serve

And whoala! You should see the blog in a fresh new look!
The best part of it is, the Theme can be developed by any set of tools, and customized to any level of imagination.

Final notes

I hope you've enjoyed reading this article as I've enjoyed writing it.
Probably, at this time, the coffee (or tea) is already finished, time for another one!

Also, I have mentioned, there is no need to remember maren commands. To get a reminder, simply run:

npx maren

The output you might see (especially if you have maren-s3 installed) might look like this:

maren <command>

Commands:
  maren init                                init current folder
  maren build                               build blog to _build directory
  maren watch                               watch markdown files for changes and
                                            create html
  maren serve [--port]                      serve files for local preview
  maren upload <bucket> [--themes]          upload to S3
  [--static] [--html] [--dryrun]

Options:
  --version  Show version number                                       [boolean]
  --help     Show help                                                 [boolean]

That's all for now!
In case you'd like to know more, please, visit https://maren.io.

Maren (simple theme based static site generator)

Pavel Bucka — Sat, 02 Nov 2019 12:00:26 +0000

Hi friends, I have created this static site generator, Maren (https://maren.io) that converts Markdown files to HTML using a theme.

The main difference to other SSG is in "Themes". Themes are separated, live by their own, and can be developed by any template library of choice (there's no limitation to that).

Any customization to the theme is easy, also reusability of its parts. There are no scaffolds to follow, no layout files, scortcodes, custom tags, or other structure dictated by other SSG.

Please, let me know your thoughts on this. Also, if you'd like to help me out to make it more generally available, please, send me a message. Thank you in advance.

All best! :)
Pavel

https://maren.io
https://discord.gg/VNVHa7r

DEV Community: Pavel Bucka

Learn the most useful Chrome APIs by creating Block Site Chrome extension

Introduction

First steps

Create Options page (use "storage")

A closer look on "storage"

Create Background script (use "tabs")

A closer look on "tabs"

Testing Block Site

A simple way to detect if your JS App is online/offline/or having a slow connection (+ Alerts, + Emulating the slow Internet)

Step 1.

Step 2.

Step 3.

Create your first awesome Chrome Extension in just 5 minutes! 🔥🔥🔥 (FAQ included 🤔 => 😊)

Step 1

Step 2

Step 3

Step 4

Step 5

Step 6

Step 7

Step 8

FAQ

Chrome Extension That Skips YouTube Ads (+Steps How To Create It)

Skip Ad

Chapters

1 How to install Skip Ad

2 How Skip Ad looks

3 How Skip Ad works

4 How to create Skip Ad

4.1 Start by creating a new folder

4.2 Create manifest.json

4.3 Add icon

4.4 Install extension locally

4.5 Time to skip the ads

4.6 Setting content script

4.7 Reload the extension

4.8 Test the extension

5 Repository

Chrome Extension that turns your "New Tab" into a note taking tool

Before

Now

Some points

How it looks

Where to get it

Final words

Chrome Extension that stops your Social Media addiction

Problem

Help

Where to get it

Final thoughts

How to write a blog in Maren?

Introduction

Examples

Maren

Creating our first blog

Step 1: Starting a new blog

Step 2: Writing the content

Strategy 1

Strategy 2

Step 3: Previewing the blog

Step 4: Uploading the blog

Step 5: Using your own theme

Final notes

Maren (simple theme based static site generator)

4.2 Create `manifest.json`