Currently building DiscordServers.com and some other stuff. Senior Fullstack Engineer. Unofficial developer advocate of Next.JS and Vercel.

So, you've delved into writing your own Chrome extension. Maybe you've even already made one, but you still have a question: How can I use the current technology to do this? Well, as it turns out, it only takes a few extra steps!

In this tutorial, I am going to go over how to create a Chrome extension using NextJS! While this guide is tailored specifically for NextJS, I presume it would work well for Nuxt as well, but please let me know in the comments!

First up, we are going to create our NextJS application!

npx create-next-app && cd next-app
# or
yarn create next-app && cd next-app

At this point, you can install any extra dependencies you may wish to add (like Typescript or TailwindCSS).

This will set up some defaults for you, but we need to change them. First off, to build a NextJS app for a chrome extension, we need to use "next export". To do this, we are going to edit the scripts in package.json:

{
    "scripts": {
        "build": "next build && next export"
    }
}

You won't need the other two scripts. Let's remove them. You can also go in and delete your `pages/api` directory, as we won't be using them. 

Next, we need to create a "manifest.json" and place it in "public/". You will also need icons for this. There are several generators for this that you can find only, but here is a starter:

My Extesnion

My New Extension

From here, we can run "yarn build". This will create our app and export it to a static site in "out/". We'll run into a problem with this though, in that chrome extensions can't (for some reason) have underscores in their paths. 

Let's do some more tweaking to fix that! We will add a new script to "scripts" that change the directory in the code and the directory structure.

Sweet! Now double-check the "out" directory and make sure everything looks right. 

If everything looks good, you can go ahead and load the "out/" directory into chrome!

I'd be ending this a little short if I didn't suggest improving the developer experience of this. Having to run "yarn build" every time you make a change is annoying.

This is a convenient package that watches files based on different settings you give it and then runs an "npm script".

Below you'll find my suggested configuration for this. You'll want to tweak this based on your project settings.

That's it! If you have any problems getting this going, please reach out in the comments, or come chat with me in discord at https://discord.gg/FUhmvK7. I hope this has been helpful!

Don't forget to come and watch me stream either: https://twitch.tv/CryptikLemur.

I do programming streams during the day on Tuesday, Wednesday, and Thursday, so come on by!

So, you've delved into writing your own Chrome extension. Maybe you've even already made one, but you still have a question: How can I use more current technology to to this? Well, as it turns out, it only takes a few extra steps!

I've been working on a project at Underground Elephant that is a very very very heavy javascript project. It's heavily event-driven, but I have an issue with the lack of event priorities in jquery. The Symfony 2 Event Listener is a great example of what an event listener should look like, for a couple of reasons. First, and most importantly (to me at least), the events have a priority. Secondly, Events have specific classes that get passed with them, so you know exactly what to expect.

I wanted something like this for javascript, but there was really nothing out there for jQuery. In fact, Dave Methvin(@davemethvin), a member of the jQuery core team, made this comment about a year ago:

#QUOTE
We've discussed this before and decided it's not productive to have handlers that try to out-prioritize each other. You're welcome to write something like that implementation as a plugin, as long as it's understood that it uses internals that may change and break the code.
#ENDQUOTE

This was a little disappointing to me, but I can understand a little why they made this decision.

So, with all this, I decided to make a small little addon for jQuery that allows for creating custom events. The custom events can have priorities and require a defined "class" (as javascript uses it).

Without further ado, i present to you: Fusion Framework

As of right now, this framework only supports custom events.
You cannot use this for events that are meant to be bound to elements.

This framework requires jQuery 1.9 or higher.

Right now, there are only two built-in events. DOCUMENT_LOAD, and DOCUMENT_UNLOAD.
To use your own custom events, you need to add them to the event list, which can be done as follows:

#LANG:javascript
(function (fusion) {
    fusion.events.add('SOME_EVENT_NAME', fusion.event.extend({somevar: null}));

    // You can store those in classes too. For example, the DOCUMENT_LOAD stuff
    var func = fusion.event.extend({
        window: window,
        document: document,
    });

    fusion.events.add('DOCUMENT_LOAD', func);

})($.fn.fusion);

To bind to these events, we will be using the fuse method. Pretty simple, from the demo app:

You can get to the event's data with event.getData( [key] ).

#LANG:javascript
// Note, by default $f is an alias of $.fn.fusion

// Create your first event. This has a default priority of 50.
$f.fuse('DOCUMENT_LOAD', function (event) {
    event.getData('window').location.href += '#test';
});

// Later down the line in your app, you want something bound before the above.
// So we create another bind, but set the priority to something lower than 50 (5 here).
$f.fuse('DOCUMENT_LOAD', function (event) {
    event.getData('window').location.href += '#highesttest';
}, 5);

// Even later down, we want something bound after the other two events.
// So we create another bind, but set the priority to something higher than 50 (70 here).
$f.fuse('DOCUMENT_LOAD', function (event) {
    event.getData('window').location.href += '#test';
}, 70);

You now have three binds on the DOCUMENT_LOAD event.

To fire these events, just call the ignite method, and pass in the event class's variables. Super simple.

For example, the DOCUMENT_LOAD and DOCUMENT_UNLOAD events.

#LANG:javascript $(function () {     fusion.ignite('DOCUMENT_LOAD', {window: window, cheese: 'cheese'});     $(document).unload(function () {         fusion.ignite('DOCUMENT_UNLOAD', {window: window});     }); });

If you noticed, as a test, I've added cheese: 'cheese' to the DOCUMENT_LOAD event, to see if you could access that on the page.
You can test this yourself, but in the binds, you won't be able to access the cheese data, because it was never in the class properties.

If you would like to help with contributing, please do! Just fork this code, make your changes, and put in a pull request.
I would love for this framework to work with element bound events, but I don't have enough time to figure that out.

I was looking for a way to have an input, that when you change, would roll to the next input. The project I'm working on has a page based system, so each page has its own fieldset. When the last field is completed, I wanted it to automatically roll to the next page. I also wanted functionality for zip code, and phone number fields, that would roll to the next input after 5 digits on zip, or roll to the next piece of the phone number field.

#LANG:javascript
$( document ).on( 'keyup click', ':input.rollToNext', rollToNext );

#LANG:javascript
function rollToNext(event) {
    switch (event.type) {
        case 'click':
            if (!$(this).is('select')) return false;
            break;
        case 'keyup':
            var code = event.keyCode ? event.keyCode : event.which;
            if ($(this).is('select') && code != 13 && code != 9) return false;
            break;
    }

    // If the function has made it here, we should run the roll to next logic
    var fieldset = $('fieldset:visible'),
        fields = fieldset.find(':input:visible'),
        empty = fields.filter(function () {
            return !$(this).val().length;
        }).length;

    if (!empty && fieldset.find(':input#form_validate').length == 0) {
        // Show the next page here (Our own custom function)
    }

    // Now for the logic that rolls to the next input on zipcode and phone
    if ($(this).attr('maxlength') !== undefined) {

        //Making sure it was actually a character that was typed
        var inp = String.fromCharCode(event.keyCode);
        if (!(/[a-zA-Z0-9-_ \.]/.test(inp))) return true;

        if ($(this).val().length == $(this).attr('maxlength')) {
            $(this).blur();

            for (var i in fields) {
                var index = fields[i];
                if (typeof previous != 'undefined') return $(index).focus();
                if (index == this) var previous = index;
            }
        }
    }
}

Voila, your `rollToNext` function is there. All you need to do is pull a `rollToNext` class on your input. If you need any help implementing this, hit me up in the comments.

Basically, we wanted to be able to use a simple Reverse Proxy (not Varnish, not Squid), that used a Memcache installation, instead of the file system.

I wrote a new MemcachedStore class that AppCache now uses instead. The biggest downside is, the configs for the servers aren't used by the AppCache piece.

Heres the MemcachedStore class. Right now, it's set up to use my AequasiMemcachedBundle Symfony bundle at the moment, but it wouldn't be that hard to change to just using Memcached or Memcache.

Then, in app/AppCache.php, do the following:

Require the MemcachedStore class at the top

#LANG:php
<?php 

require_once __DIR__ . '/AppKernel.php';
require_once __DIR__ . '/MemcachedStore.php';

class AppCache
{
	// ...

#LANG:php
<?php
//...
class AppCache
{
    // ...
    public function createStore()
    {
        $servers = [
            [ 'localhost', 11211 ]
        ];
    
        return new MemcachedStore( [
            'enabled'      => true,
            'debug'        => true,
            'persistentId' => serialize( $servers )
        ], $servers );
    }
    // ...
}

If you want to create a service to get to this particular store, you would have to create a $cache variable in your app/AppKernel, and overwrite your app/AppCache's handle() method to set the kernel's $cache variable before calling parent::handle.

At my work, we deal with a project where we have several development servers, a few staging servers, and hundreds of production servers.

Having to deal with all four different environment types, without having environments hardcoded into the project is a little weird, and currently lacks much any real solutions, regarding symfony's documentation.

In short, I implemented a class that we use in app/console and web/app.php, that reads an Apache environment variable or a php.ini variable with get_cfg_var().

I've recently moved the code to a new repository:
http://www.github.com/aequasi/environment-php

Like I said above, I made an Environment class to check what environment the server belongs in. I made it a gist for you guys: https://gist.github.com/5753723.git.

Basically, this environment class, can take an ArgvInput param as a constructor, and if it does, it assumes that it's CLI. If it's CLI, it will do the same CLI checks the symfony does by default for $env, and $debug. Cli and web both allow for specifying symfony.environment in php.ini as well, and the web piece allows you to specify an apache env variable (e.g. SetEnv SYM_ENV stage).

Once you've got that code, place it into app/Environment.php (you'll have to create it). From there, copy the logic I've got for app/consle and web/app.php below.

#LANG:ini
[symfony]
symfony.environment = staging


#LANG:php
<?php
set_time_limit(0);

require_once __DIR__.'/bootstrap.php.cache';
require_once __DIR__.'/AppKernel.php';
require_once __DIR__ .'/../app/Environment.php';

use Symfony\Bundle\FrameworkBundle\Console\Application;
use Symfony\Component\Console\Input\ArgvInput;

$input = new ArgvInput( );
$env = new \Environment( $input );


$kernel = new AppKernel( $env->getEnvironment(), $env->getDebug() );
$application = new Application($kernel);
$application->run( $input );


#LANG:php
<?php

use Symfony\Component\HttpFoundation\Request;

$loader = require_once __DIR__.'/../app/bootstrap.php.cache';
require_once __DIR__.'/../app/AppKernel.php';
require_once __DIR__ .'/../app/Environment.php';

$env = new \Environment();

$kernel = new AppKernel( $env->getEnvironment(), $env->getDebug() );
$kernel->loadClassCache();
Request::enableHttpMethodParameterOverride();
$request = Request::createFromGlobals();
$response = $kernel->handle($request);
$response->send();
$kernel->terminate($request, $response);

Dealing with a project where there are several development servers, a few staging servers, and hundreds of production servers. Manage your environments easily!

Better Symfony Environments: Large Systems

Getting into testing at work with one of our new projects, and we need to be able to test our services. The biggest problem I had here, is that we have several services not in the default scope. After a little bit of digging and testing, I came up with this:

#LANG:php
<?php
/**
 * @author    Aaron Scherer <aaron@undergroundelephant.com>
 * @date      2013
 * @copyright Underground Elephant
 */
namespace Ue\Bundle\RenderBundle\Tests\Service;

use Symfony\Bundle\FrameworkBundle\Test\WebTestCase;
use Symfony\Component\HttpKernel\HttpKernelInterface;
use Symfony\Component\HttpFoundation\Request;

use Ue\Bundle\RenderBundle\Service\RequestService;

/**
 * RequestServiceTest Class
 */
class RequestServiceTest extends WebTestCase
{

	/**
	 * @var RequestService
	 */
	private $requestService;

	/**
	 * @var
	 */
	private $container;

	/**
	 * {@inheritDoc}
	 */
	public function setUp()
	{
		$container = $this->getContainer();
		$container->enterScope( 'request' );
		$request = Request::create( '/t/1/' );
		$session = $this->getMock( 'Symfony\Component\HttpFoundation\Session\SessionInterface' );
		$request->setSession( $session );
		$this->getContainer()->set( 'request', $request );

		$this->requestService = $this->container->get( 'ue.render.request' );
	}

	/**
	 * {@inheritDoc}
	 */
	public function tearDown()
	{
		$this->getContainer()->leaveScope('request');
	}

	/**
	 * @return mixed
	 */
	public function getContainer()
	{
		if ( $this->container ) {
			return $this->container;
		}

		static::$kernel = static::createKernel( );
		static::$kernel->boot();

		$this->container = static::$kernel->getContainer();

		return $this->container;
	}

	/**
	 * Testing the constructor, and service call
	 */
	public function testRequestService()
	{

		$expected = 'Ue\Bundle\RenderBundle\Service\RequestService';
		$this->assertInstanceOf(
			$expected,
			$this->requestService,
			sprintf( "Expected %s for requestService. Got %s.", $expected, get_class( $this->requestService ) )
		);
	}

	/**
	 * @depends testRequestService
	 */
	public function testBuildRequest()
	{
		$this->requestService->setTestId( 1 );

		$expected = 'Ue\Bundle\RenderBundle\Model\Request';
		$request  = $this->requestService->buildRequest();
		$this->assertInstanceOf(
			$expected,
			$request,
			sprintf( "Expected %s for response from buildRequest(). Got %s instead.", $expected, get_class( $request ) )
		);
	}
}

This creates the request (which you need to get the service), sets up the kernel, and because our RequestService is in the request scope, enters the request scope with $container->enterScope( 'request' );.

Getting into testing at work with one of our new projects, and we need to be able to test our services. The biggest problem I had here, is that we have several services not in the default scope. After a little bit of digging and testing, I came up with this

Symfony2 Testing: Testing Services in Request Scope

A couple of months ago, I was looking for a way to restrict a development site in such a way, that while people were at work (where we have a static IP), and then require a .htpasswd file for everyone outside.

Well, it was actually kind of simple. After you've got your .htpasswd file set up, just throw this inside your vhost

#LANG:apache
AuthName "Change This"
AuthUserFile /path/to/.htpasswd
AuthType Basic
Satisy Any
<Limit GET POST>
	Order Deny,Allow
	Deny from all
	Allow from 12.34.56.789
	Require valid-user
</Limit>


For your environment, you should change the AuthName, the AuthUserFile, the Limit (maybe, GET and POST might be enough), and the IP (12.34.56.789).

Change out the variables for what your environment requires, and you should be all set.

A couple months ago, I was looking for a way to restrict a development site in such a way, that while people were at work (where we have a static IP), and then require an .htpasswd file for everyone outside.

I have been working on a new cache implementation for the Symfony2 framework, and I needed a way to check if a named class inherited a given interface , so i wrote the following:

#LANG:php
<?php
function classInherits( $class, $inherit ) {
	if( is_object( $class ) ) {
		return ( $class instanceof $inherit );
	} elseif( is_string( $class ) ) {
		return (bool) in_array( $inherit, class_implements( $class ) );
	}

	throw new Exception( "First value must be the name of a valid class, or an instance of one." );
}

So, I started work on a personal project of mine that I wanted to be able to use Memcached. The project is using the Symfony2 PHP framework, so I decided to look around a little bit to see if I could find a bundle that does what I needed.

I stumbled upon the LswMemcacheBundle at first, and it looked quite nice, having features like Anti Dog Pile, and Profiling attached to the Web Profiler Toolbar. I started looking at the code however, and it had a lot of bloat that I didnt want, some of the terminologies werent right, and it was missing a feature that I wanted. So I took it and decided to write my own.

So now, I give you the AequasiMemcachedBundle! This takes a lot of the core logic, and features of the LswMemcacheBundle, but removes the ability to use the Memcache extension, and the compatibility with Memcached versions below 2.0.

To install this bundle, check out the source here, and follow the instructions in the readme.

So, I started work on a personal project of mine that I wanted to be able to use Memcached. The project is using the Symfony2 PHP framework, so I decided to look around a little bit to see if I could find a bundle that does what I needed

Aaron Scherer

Hey, I'm Aaron!

Creating a Chrome Extension with NextJS

jQuery Event Priority - Fusion Framework

jQuery: Roll to Next Input

Symfony Reverse Proxy: Memcached

Better Symfony Environments: Large Systems

Symfony2 Testing: Testing Services in Request Scope

IP Based Htaccess Restriction

Checking Named Class Inheritance

Symfony 2 and Memcached: A new Bundle