Check if a Script Has Loaded in JavaScript
Detect when a dynamically injected JavaScript file has finished loading using the onload event on a script element.
Example
var myScript = document.createElement('script');
myScript.src = 'https://code.jquery.com/jquery-3.7.0.min.js';
myScript.onload = function() {
console.log('Script loaded successfully.');
};
myScript.onerror = function() {
console.error('Script failed to load.');
};
document.body.appendChild(myScript);
Notes
- The
onload callback fires once the script is downloaded and executed. - Add
onerror to handle network or 404 failures. - For multiple ordered scripts, use Promises or a module bundler.
Build Your First Chrome Browser Extension
Create a minimal Google Chrome extension from scratch with only a text editor and Chrome.
Prerequisites
- Google Chrome installed
- Basic HTML and JavaScript knowledge
Step 1 - Create the Manifest
Create a folder my-extension/ and inside it manifest.json:
{
"manifest_version": 3,
"name": "My First Extension",
"version": "1.0",
"description": "A simple Chrome extension.",
"action": {
"default_popup": "popup.html"
}
}
Step 2 - Create the Popup
Create popup.html:
<!DOCTYPE html>
<html>
<head><title>My Extension</title></head>
<body>
<h1>Hello from my extension!</h1>
<script src="popup.js"></script>
</body>
</html>
Step 3 - Load in Chrome
- Open
chrome://extensions/. - Enable Developer mode (top-right toggle).
- Click Load unpacked and select the
my-extension/ folder. - Click the extension icon in the toolbar to open the popup.
Next Steps
- Use content scripts to interact with page DOM.
- Use background service workers for persistent logic.
Replace Link Text with an Image Using jQuery
Replace anchor tag text with inline images using jQuery.
Example
$(document).ready(function(){
$('a:contains("Telegram")').html('<img src="/img/telegram.png" alt="Telegram">');
$('a:contains("Twitter")').html('<img src="/img/twitter.png" alt="Twitter">');
});
Notes
:contains() is case-sensitive..html() replaces the inner content; the anchor tag and its href remain.- Set explicit width/height on the image to prevent layout shift.