With Google’s transition from Manifest V2 to V3 for Chrome extensions, many developers have faced the challenge of updating their extensions to comply with new security and performance requirements. One of the significant changes is the restriction on remote hosted code and the use of eval to execute JavaScript dynamically. This shift has necessitated finding new methods for executing code securely within extensions. This post explores how ANTLR (ANother Tool for Language Recognition) can be leveraged to parse and execute JavaScript code within a browser extension, providing a safer and more flexible alternative to eval.

Why the Change?

Manifest V3 aims to make extensions more secure and performant. By disallowing remote hosted code and the use of eval, the new manifest version reduces the risk of malicious code execution. According to Google’s documentation:

“Manifest V3 removes the ability for an extension to use remotely hosted code, which presents security risks by allowing unreviewed code to be executed in extensions. With this change, an extension can only execute JavaScript that is included within its package and subject to review by the Chrome Web Store.”

Source

Understand the Challenge

Before diving into the solution, it’s essential to understand the problem. Manifest v2 extensions allowed developers to execute arbitrary JavaScript code using eval. This functionality offered great flexibility but came at the cost of security risks. Malicious actors could inject code that exploited vulnerabilities or compromised user privacy. With Manifest v3, Google prioritizes user safety by restricting the ability to execute code not included within the extension itself.

ANTLR to the Rescue

ANTLR is a powerful tool for building language parsers. By defining a grammar for your instruction sets, you can use ANTLR to parse these instructions and execute the corresponding JavaScript code within your extension.

Step-by-Step Guide

  • Define Your Grammar with ANTLR: Create a grammar file that outlines the syntax of the instruction sets you plan to use.
  • Generate Parser and Lexer: Use ANTLR to generate the parser and lexer from your grammar file.
  • Integrate ANTLR in Your Extension: Update your extension’s code to use the generated parser and lexer to interpret and execute the instructions.

Example: Logging “Hello World!” to the Console

Let’s walk through an example where we want to execute the instruction to log “Hello World!” to the console using ANTLR.

Step 1: Define the Grammar

Create a file named CustomScript.g4 with the following content:

grammar CustomScript;

script: statement+;
statement: logStatement;

logStatement: 'logInfo' '(' expression ')' ';';
expression: STRING | NUMBER | BOOLEAN | IDENTIFIER;

STRING: '"' ~["]* '"';
NUMBER: '-'? DIGIT+ ('.' DIGIT+)?;
BOOLEAN: 'true' | 'false';
IDENTIFIER: [a-zA-Z]+;

fragment DIGIT: [0-9];

This grammar defines a simple language with a log statement: logInfo(“string”);.

Step 2: Generate the Parser and Lexer

Use ANTLR to generate the parser and lexer:

antlr4 -Dlanguage=JavaScript CustomScript.g4

This command will generate the necessary JavaScript files.

Step 3: Integrate with Your Extension

In your extension’s background or content script, include the following JavaScript code to parse and execute the instruction:

// Assuming you have included the generated parser and lexer JavaScript files
const antlr4 = require('antlr4');
const CustomScriptLexer = require('./CustomScriptLexer').CustomScriptLexer;
const CustomScriptParser = require('./CustomScriptParser').CustomScriptParser;

function executeInstructionSet(input) {
const chars = new antlr4.InputStream(input);
const lexer = new CustomScriptLexer(chars);
const tokens = new antlr4.CommonTokenStream(lexer);
const parser = new CustomScriptParser(tokens);
parser.buildParseTrees = true;

const tree = parser.script();

const visitor = {
    visitScript(ctx) {
        return this.visitChildren(ctx);
    },
    visitLogStatement(ctx) {
        const expr = ctx.expression().getText();
        const message = expr.startsWith('"') && expr.endsWith('"')
            ? expr.substring(1, expr.length - 1) // Remove quotes for strings
            : expr;
        console.log(message);
    },
    visitChildren(ctx) {
        if (!ctx) return;
        if (Array.isArray(ctx.children)) {
            return ctx.children.map(child => this.visit(child));
        }
    }
};
visitor.visit(tree);
}

// Example usage
const instructionSet = 'logInfo("Hello World!");';
executeInstructionSet(instructionSet);

Conclusion

By leveraging ANTLR, you can create a robust solution for dynamically executing code within your Chrome extension while complying with Manifest V3 requirements. This approach not only enhances security but also opens the door for more sophisticated instruction sets and parsing logic.

In this example, we demonstrated how to log “Hello World!” to the console using a custom instruction set. This method can be expanded to include more complex operations, giving you flexibility and control over your extension’s behaviour.

Feel free to share your thoughts or ask questions in the comments below. Happy coding!

ANTLRBrowser ExtensionJavaScriptManifest V3