Code Injector: Customize Your Web Browsing Experience

Enhance your control over the internet with Code Injector, a powerful browser extension designed for users who want to tailor their web experience. If you’ve ever wished you could tweak a website’s layout, remove annoying pop-ups, or add extra functionality to your favorite online tools, then Code Injector is for you. This WebExtension-based addon empowers you to inject custom code directly into websites, giving you unprecedented control over how you browse.

Please note: Code Injector is designed for users with some understanding of web programming basics. While user-friendly, a fundamental grasp of HTML, CSS, and JavaScript will greatly enhance your ability to utilize its full potential.

Installation

Installing Code Injector is straightforward and available for multiple popular browsers. Choose your browser and install directly from the official web store:

Browser	Web Store Link	Online Version
Firefox	Download for Firefox	0.3.3
Chrome	Download for Chrome	0.3.2
Opera	(uploading..)	0.3.2
Edge	Download for Edge

Understanding Code Injector

Purpose: Reclaim Your Web Experience

Navigating the web can sometimes be frustrating. Many websites are cluttered with intrusive pop-ups, confusing layouts, or lack essential features that would improve usability. While browser developer consoles offer a way to manually adjust website elements, doing so repeatedly is time-consuming. Code Injector solves this by automating website customization.

Instead of manually tweaking website code every time you visit, Code Injector lets you create rules to automatically modify websites in the background. Imagine effortlessly removing distracting elements, decluttering pages for better readability, or even adding custom functionalities to websites you use daily – all without needing to code directly in the browser console each time. This extension is your solution to a more streamlined and personalized web browsing experience.

Quick Start: Your First Code Injection

Let’s get you started with a simple code injection rule:

Create a New Rule: Begin by opening the Code Injector extension popup and clicking the “+” button to create a new rule. This will open the rule editor.

Screenshot of the Code Injector interface highlighting the button to create a new rule.

Define the Rule: In the rule editor, you’ll need to specify two key things:
- URL Pattern: Enter the website address or a pattern that matches the websites where you want to apply your code. For example, to target Google, you might use google.com.
- Contents: This is where you’ll write the code you want to inject. For a simple test, you can add a basic JavaScript alert: alert('Code Injector is working!');

Screenshot of the Code Injector rule editor with example URL pattern and JavaScript code.

Save and Apply: Save your rule. To see it in action, either reload a page that matches your URL pattern or navigate to a new matching website. You should see the alert message, confirming your code injection is working.

Navigating the Main View: Rules List

The Main view is your central dashboard for managing code injections. Upon opening Code Injector, you’ll see a list of your created rules, allowing for easy organization and control. This is where you manage all your website customizations.

Screenshot of the Code Injector main view showcasing the rules list interface.

Rules: The Building Blocks of Customization

Each entry in the main view is a Rule. A rule is a container holding the code (JavaScript, CSS, HTML, and Files) that you want to inject into specific websites. Code Injector injects the contents of a rule in a specific order to ensure proper execution and cascading effects:

Files: Files are injected first, in the order they are listed within the rule.
CSS: Cascading Style Sheets are applied next, allowing you to modify the website’s visual presentation.
HTML: HTML code is injected to alter the website’s structure and content.
JavaScript: Finally, JavaScript code is executed, enabling dynamic behavior and functionality changes.

Important Note: Rules are injected sequentially. This means that each rule can build upon the modifications made by previously injected rules. Be mindful of the order of your rules, as it can affect the final outcome on the webpage.

Rule Structure: Understanding the Elements

Each rule in the list is clearly structured to provide essential information and quick actions at a glance.

Screenshot highlighting the different sections within a Code Injector rule element.

A rule element is divided into three key sections:

Pattern: Displays the URL Pattern you’ve defined for the rule. This pattern determines which websites the rule will be applied to. It dynamically highlights in blue if the pattern matches the currently active webpage, providing immediate visual feedback. A dotted blue highlight indicates injection within iframes. If a rule is disabled, the pattern is shown in red with a strikethrough, clearly indicating its inactive status. You can also drag and drop rules to reorder them in the list, changing the injection sequence.
Insight: Provides a quick overview of the rule’s content using colored dots. Each dot represents a code type: JavaScript, CSS, HTML, and Files (from left to right). A colored dot indicates the presence of that code type within the rule, allowing you to quickly identify the rule’s purpose.
Actions: Offers a set of action buttons for managing each rule:
- Edit: Opens the Editor view for modifying the rule’s settings and code.
- Inject: Manually triggers the injection of the rule into the currently active browser tab. This is useful for testing or applying rules on demand.
- Move Top: Repositions the rule to the very top of the rules list, making it the first rule to be injected.
- Move Bottom: Repositions the rule to the bottom of the rules list, making it the last rule to be injected.
- Enabled: A toggle switch to enable or disable the rule. Disabled rules are not injected into websites.
- Delete: Removes the rule. Requires a double-click confirmation to prevent accidental deletion.

Editor View: Crafting Your Code Injections

The Editor view is where you define the specifics of each rule, including the URL pattern and the code to be injected. This is your coding workspace within Code Injector.

Screenshot of the Code Injector editor view, showing tabs for different code types and settings.

URL Pattern: Targeting Specific Websites

The URL pattern is crucial for defining where your code injection will take place. It acts as a filter, ensuring your code is only applied to the intended websites.

When a webpage is loaded, Code Injector checks the page’s full address against the URL pattern you’ve defined in each rule. If a match is found, the code within that rule is queued for injection.

URL patterns in Code Injector utilize the ECMAScript (JavaScript) regular expressions syntax. Regular expressions offer powerful and flexible pattern matching capabilities. You can find detailed information about JavaScript regular expressions on the Mozilla Developer Network.

Code Injector provides real-time feedback on your URL pattern. It highlights the pattern in blue if it currently matches the address of the active webpage, and in red if the pattern syntax is invalid, helping you quickly identify and correct any errors.

Example: Let’s consider the URL pattern google.

 <span>// The URL pattern "google" is used to create a RegExp object.</span>
 <span>new</span> <span>RegExp</span><span>(</span><span>"google"</span><span>)</span><span>;</span>
 <span>// This results in the regular expression:</span>
 <span><span>/</span><span>g</span><span>o</span><span>o</span><span>g</span><span>l</span><span>e</span><span>/</span></span>
 <span>// Assuming the current page address is "https://www.google.com":</span>
 <span>/</span><span>google</span><span>/</span><span>.</span><span>test</span><span>(</span><span>"https://www.google.com"</span><span>)</span><span>;</span>
 <span>// If this test returns TRUE, the rule is scheduled for injection.</span>

Important Note: The URL pattern field is designed to accept only the regular expression itself. You do not need to include the forward slashes / that are typically used as delimiters in JavaScript regular expression literals. For example, use hello world instead of /hello world/.

Editors: JavaScript, CSS, HTML, and Files

The main area of the Editor view is divided into tabs, providing dedicated editors for different code types: JavaScript, CSS, and HTML, along with a Files manager. Simply click on the respective tabs to access each editor.

Note: If an editor contains only comments and no active code, it will be considered empty, and no code will be injected from that editor for that rule.

Files: Injecting External Resources

The Files tab allows you to inject external files, either local files from your computer or remote files hosted online.

As you type a file path, an icon will appear to the right of the input field. This icon indicates whether the file is recognized as remote or local and its type (JS, CSS, or HTML), denoted by a blue color. If the file extension is not recognized as one of these three types, the icon will display a red “X,” and the file will be skipped during injection.

Tip: You can override the automatically detected file type. Click on the file type icon to open a dropdown menu and manually select the correct language if needed.

Important Note (Firefox on Windows): Injecting local files is an experimental feature and might encounter limitations, particularly on Firefox for Windows (version 57+). Due to potential browser security restrictions, accessing files from certain folders (like Desktop or Documents) might be blocked, while accessing the root directory (C:) might work. This behavior could be related to user access control changes in newer Firefox versions, and further investigation is needed.

Warning: Local file injection is an experimental feature and may become unreliable or stop working entirely due to browser updates and security policy changes. Use with caution.

On Page Load: Injection Timing Control

The “On page load” setting determines when the rule’s code is injected.

If TRUE (default), the code is injected after the entire webpage and all its resources (images, scripts, stylesheets) have finished loading. This is generally suitable for most customizations.
If FALSE, the code is injected as soon as the browser begins receiving the webpage’s HTML content (DOM is received but still loading), which happens earlier in the page loading process. This can be useful for modifications that need to be applied very early in the page rendering.

Refer to the Injection Flow section for more details on the injection process.

Top Frame Only: Targeting Main Pages or Iframes

The “Top frame only” setting controls whether the rule is injected only into the main webpage frame or also into iframes embedded within the page.

If TRUE (default), the rule is injected only into the top-level document of the webpage, not into iframes.
If FALSE, the rule will be injected into both the top-level document and any iframes present on the page that match the URL pattern.

Options View: Configuring Code Injector

The Options view provides settings to customize Code Injector’s behavior and manage your rules. Access the options by right-clicking the Code Injector icon and selecting “Options”.

Screenshot of the Code Injector options view, showing settings for rules, size, and import/export.

Saved Rules: Management Tools

This section displays the total number of rules you have currently saved. It also includes a “Clean” button to remove all saved rules.

Confirmation Required: The “Clean” button requires a double-click to confirm the action, preventing accidental deletion of all your rules.

Size: Adjusting Popup Dimensions

The “Size” setting allows you to customize the dimensions (width and height in pixels) of the Code Injector popup window to better suit your screen and preferences.

Import / Export: Backing Up and Sharing Rules

Code Injector provides robust import and export functionality for managing and sharing your rules.

Export:

Click the “Export” button to open the “export modal”.
The “export modal” displays a list of all your currently saved rules.
Select the rules you wish to export. (At least one rule must be selected to enable the export button).
Click the “Export” button in the modal. The selected rules will be downloaded as a JSON file to your computer.

Import:

Click the “Import” button to open the “import modal”.
Choose your import method from three options:
1. Local JSON File: Select a JSON file containing exported rules from your local file system.
2. Remote JSON File: Provide a URL pointing to a remote JSON file containing exported rules. Example: https://www.mydomain.com/path/to/ruleslist.json
3. GitHub Repository: Import rules directly from a GitHub repository. Example: https://github.com/Lor-Saba/Code-Injector-GitHub-Rule
Click the “Import” button to initiate the import process.

Feedback: A message will be displayed to indicate whether the import or export operation was successful or if any errors occurred.

Show Counter: Rule Injection Indicator

If the “Show counter” option is enabled (set to true), a badge will be displayed on the Code Injector extension icon. This badge shows the number of rules that are currently actively injected into the current webpage, providing a quick visual indicator of Code Injector’s activity.

Injection Flow: How Code Injector Works

By default, a rule is configured to be injected “On page load” (after the document and all its resources are fully loaded). However, you can change this to injection on navigation commit (when the DOM is received but still loading) by deselecting the “On page load” option in the Editor view.

When a webpage is loaded or navigated to, Code Injector follows this injection flow:

Rule Matching: Code Injector examines all enabled rules and checks if their URL Patterns match the address of the current webpage.
Rule Queuing: Rules with matching URL patterns are added to an injection queue, ordered from top to bottom as they appear in your rules list.
Injection Execution: Code Injector injects the queued rules in order, grouped by code type (Files, CSS, HTML, JavaScript).

Diagram illustrating the injection flow process in Code Injector.

What’s Next for Code Injector

The goal is to continue making Code Injector even more user-friendly and accessible, empowering users with varying technical skills to customize their web browsing experience with ease. Future updates may focus on simplifying rule creation and management, expanding code injection capabilities, and providing more intuitive tools for web customization.

Credits

Code Injector is built upon the foundation of WebExtensions, leveraging the power of modern browser extension technology.

Info

Code Injector is developed and maintained by L.Sabatelli.

License: GPLv3