Skip to content

Latest commit

 

History

History
250 lines (158 loc) · 10.1 KB

README.md

File metadata and controls

250 lines (158 loc) · 10.1 KB
Raw

Code-Injector

A WebExtensions based addon which let the user inject code into the websites

This is an add-on which requires a minimum of knowledge of web programming to be able to properly use it.

Purpose

There are several sites with invasive popups / login screens, a messy layout or some missing capabilities.
I was usually getting around these boring stuff by opening the browser console to edit the DOM style and structure but it was starting to get tiring doing it everytime, so why not making and extension which do it by itself in background?

Contents

Quick start

Get started creating a new Rule.

Complete the Rule by entering the URL Pattern and Contents,
then save and reload the page (or navigate to the matching address) to apply your script.

Main view (Rules list)

The Main view is the initial and main page of the addon where you can create and manage your code injections with a list of Rules.

Rules

A Rule may contain JavaScript, CSS, HTML and Files and will be splitted and injected with the following order:

  1. Files (from top to bottom)
  2. CSS
  3. HTML
  4. JavaScript

Note:
Each rule will inherit the previous injected code.

Rules structure

The Rule's element bar can be subdivided into 3 sections: Pattern, Insight and Actions.

  • Pattern:
    The Rule's Pattern, as defined here in the Editor section, specifies in what pages the rule should be applied.
    It will be highlighted in blue if it matches with the address of the current page.
    If the rule is disabled the Patern is highlighted in red with a line over the text.
    Also, the whole area is draggable allowing to move the Rule and change the injection order.

  • Insight:
    Shows a minimal description of the Rule whether contains or not a language using 4 coloured dots.
    (from left to right: JavaScript, CSS, HTML and Files)

  • Actions:

    • Edit
      Open the Rule in the Editor view.

    • Delete
      Delete the Rule. Must be clicked twice, the button will extend as if asking for the user confimation.

Editor view

The Editor view is where can be defined a Rule codes and properties.

URL pattern

The URL pattern specifies in what pages the rule should be applied.

When a page is opened, the pattern will be matched against the full address of the new page, if the pattern corresponds with that address then the code contained in the rule will be injected into the page.

The URL pattern follows the ECMAScript (a.k.a. JavaScript) regular expressions syntax, see here for more detailed information.

The add-on helps you on checking whether the pattern is correct by highlighting it in blue if it matches with the address of the current page and highlight it in red if it is invalid.

In depth example in case of google as url pattern:
(this example is just for knowledge purposes)

    // the URL pattern "google" is passed as argument 
    // by the "URL Pattern" to the RegExp constructor.
    new RegExp("google");

    // resulting in..
    /google/

    // assuming "https://www.google.com" as page address:
    /google/.test("https://www.google.com");

    // if TRUE the rule will be queued for injection

Note:
Because the URL pattern text box is meant to contain only a regular expression, the forward slashes / used as delimiters in the JavaScript language are not needed.
You should therefore write hello world instead of /hello world/.

Editors

The main section of the Editor view.

From left to right you can access the JavaScript, CSS, HTML editors and the Files manager by clicking on the tabs.

Note:
If an editor contains just comments the code wont be injected.

Files

In the Files tab you can manage the injection of local* or remote files.

While typing the file path, an icon should appear on the right side of the input area indicating whether the file is remote or local and it's type (js/css/html) in blue.
If the file extension is not recognized as one of the 3 types mentioned above then the icon will show a red "X" on the edge and the file will be skipped from injection.

Note:
The file type can forced by clicking on the icon and selecting the supposed language from the dropdown menu.

IMPORTANT:
The injection of local files is experimental and could stop working anytime with browser's updates.

Enabled:

If TRUE, define if the current rule can be injected.

On page load:

If TRUE, the rule will be injected on page load, else it will be injected on navigation.
Check the Injection flow for more details.

Options view

Saved rules

A simple section wich shows the number of total registered rules and a button to remove them all.

Note:
The Clean button must be clicked twice to confirm the action.

Size

Define the size of the popup window. (in px)

Import / Export

  • To export press on the export button.
    The Rules will be exported as a browser download.
  • To import press on the import button.
    Navigate into your system and select a file containing a valid JSON of Rules.

A message should appear to tell whether the operation is successful or not.

Show counter

If true, a badge with the number of currently injected rules will be visible over the icon.

Injection flow

A Rule by default is set up to be injected on page load (after the document and all its resources have finished loading) but can be changed to be injected when the navigation is committed (the DOM is recived and still loading) by deselecting the property "On page load" in the Editor view.

The rules whose URL Pattern match with the page address will be selected and queued for injection. (from top to bottom, grouped by type)

Installation

  • download the repository,

  • (optional) to apply changes to the src and rebuild:

    • launch npm install to download the dev-dependencies,
    • launch grunt to build the extension, (a dist folder should have been generated containing the local version of Code-injector)

  • load the dist folder into your browser:

    • Firefox:
      Go to about:debugging and load it as temporary extension

    • Chrome:
      Options > More tools > Extensions > Load unpacked extension...

    • Opera:
      Extensions > Developer mode > Load unpacked extension...

Important:
Check the releases page to dowbload stable versions of the repository.
The master branch is used for development and may contain unfinished and broken features.

Browser compatibility:

What's next

I would like to make it more and more easy to use so that even who's new to programming can use this add-on with ease.

Credits

Info

Code Injector is written and maintained by L.Sabatelli
Licenze: GPLv3