I. How to work

With Custom Style Script add-on you can easily add custom styles (CSS) or scripts (JavaScript) to any webpage or domain. To start, just enter the page URL in which you want to insert the code in the field below (to make the URL act as a domain, please mark the domain field). Next, add desired Script and/or Style codes to the designated areas, then press on the plus (+) button. Next time you refresh the target page, the code will be injected and executed. In order to validate your code (JavaScript and CSS) before adding it to the table, you can use online editors such as LiveWeave. Once the code is validated, add it to the table. Note: if you want to insert the code to all pages, simply enter star (*) instead of the URL. In order to report bugs please visit add-on's homepage and fill the bug report form.

II. Sample

A sample code is shown below. Column (1) is the desired URL. If you want to include all URLs, simply add (*) to the filed. Column (2) is the JavaScript code. Column (3) is the CSS (style) code.

If you mark column (4), the given URL will be converted to a domain. In other words, the added style & script code will be applied to all domains matching the domain derived from the given URL. If you check column (5) the add-on uses document.location.href as the top URL (for all iframes as-well-as the main page) to check against the added URL. In other words, the add-on checks whether - document.location.href - matches the given URL or not, and if it matches, the code will be injected to the page (or iframe). If you check Column (6), the add-on uses tab URL as the top URL for all iframes and the main page. In other words, the add-on checks whether - tab URL - matches the given URL or not, and if it matches, the code will be injected to the page and all iframes within the page. Column (7) is to activate or inactivate the code, check - icon indicates an active and - block - icon indicates an inactive code (clicking the button will swap the state). Column (8) is to permanently delete an item from the table. Once an item is added to the table below, you can also add script-link and style-link for each item. Note: please first add an item (could be empty) to the table below to see the extra fields. Moreover, to add multiple links for a single page, please add each link as a separate item.

URL | JavaScript Code | Style (CSS) | Domain | Top | iFrame | State | Delete
https://www.google.com/ | window.addEventListener("load", () => {alert("Google is loaded!")}, false); | #main {background-color: yellow} | ✔ | ✔ | ✕ | ✔ | ⛌

III. Code

Enter the desired values for URL, JavaScript Code, and Style (CSS), then click on the (+) button to add it to the table (you can also add an empty item, just press the (+) icon). If you need to add online JS or CSS codes, please first add an item to the table below, then add desired links for JS and CSS in the designated input areas once the item is added.

URL | Script | Style (CSS)
+

IIII. Table

URL | Script Link / Code | Style Link / Code | Domain | Top | iFrame | State | Delete