So, I am trying to do a basic Google Chrome Hello World kind of extension. Can someone explain me why the below code doesn't work? Thanks.
popup.js:
document.getElementById("foobar").innerHTML = "Hello Chrome Extensions";
popup.html:
<!doctype html>
<html>
<head>
<title>Hello Chrome</title>
<script src="popup.js"></script>
<div id="foobar"></div>
</head>
<body>
</body>
</html>
I am following the "framework" of http://developer.chrome.com/extensions/getstarted.html.
It can be solved in two ways:
Swap the order of <script .. > and <div ..>.
Wrap the code in popup.js in a domready event:
document.addEventListener('DOMContentLoaded', function() {
// Code here...
});
Your code failed because the <div> was unknown at the time of executing the script.
Related
what I found out =>
you can't import scripts from links inside chrome extension's background scripts or content scripts (basically anywhere inside new page HTML or popup HTML)
so you what you need to do is =>
<html lang="en">
<head>
<script src="./googleAnalytics.js"></script>
<script src="./googleAnalyticsStarter.js"></script>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
</body>
</html>
instead of =>
<html lang="en">
<head>
<script
async
src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXX"
></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag("js", new Date());
gtag("config", "G-XXXXXXXX");
</script>
</head>
<body>
<noscript>You need to enable JavaScript to run this app</noscript>
</body>
</html>
I have a very simple react program that imports react using a script command and a cdn.
How do I covert it to preact while keeping the same structure?
I tried to follow these instruction, but they weren't very clear
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://unpkg.com/react#15/dist/react.js"> </script>
<script src="https://unpkg.com/react-dom#15/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.js"></script>
</head>
<style type="text/css">
</style>
<body>
<div id='root'></div>
<script type="text/babel">
function T(props){
return <h1>{props.title}</h1>
}
ReactDOM.render(<T title='welcome'/>,document.getElementById('root'))
</script>
</body>
</html>
As per this github issue you have a couple of different options for using Preact with a script tag. You can directly call h- Preact's version of React.createElement or you can use babel standalone to transform your JSX as you were in your original React example. Here is a Preact conversion of your original example.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/preact/7.2.0/preact.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.js"></script>
</head>
<body>
<div id='root'></div>
<!-- option 1: alias it -->
<script>window.React = { createElement: preact.h }</script>
<script type="text/babel">
function T(props){
return <h1>{props.title}</h1>
}
preact.render(<T title="Welcome" />, document.getElementById('root'));
</script>
</body>
</html>
I have started using electron js to develop desktop application.
I want to know that how to bind button click event with javascript function so that I can perform other operation.
I used below HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Manav Finance</title>
</head>
<body>
<input type="button" onclick="getData()" value="Get Data" />
</body>
<script>
// You can also require other files to run in this process
require('./renderer.js')
</script>
</html>
My renderer.js code looks like this:
function getData(){
console.log('Called!!!');
}
But I am getting error that:
Uncaught ReferenceError: getData is not defined
at HTMLInputElement.onclick
Am I doing something wrong?
Update
Updated HTML document and removed require() method and its working now:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Manav Finance</title>
<script src="renderer.js"></script>
</head>
<body>
<input type="button" id="btnEd" value="Get Data" onclick="getData()" />
</body>
</html>
To explain this for future users. <script> tag's in an HTML document are executed in the global scope, this means that this === window, I.e. any function or variable declared in the script inherently becomes global.
When you require a script it becomes isolated in it's own context (it is wrapped in another function so this !== window, I.e. any function or variable declared in the script is not available globally.
The correct way to do this is to use require('./renderer.js') and to use this code
function getData() {
...
}
document.querySelector('#btnEd').addEventListener('click', () => {
getData()
})
How can i call function from backgroundPage.js into action page popupPage.js
This is my code
popupPage.js
<html>
<head>
<script type="text/javascript" src="../background.js"></script>
</head>
<body>
<button id="bu_1">clickMe</button>
</body>
</html>
And backgroundPage.js
var button = document.getElementById("bu_1");
button.addEventListener("click",function(){
console.log("bu_1 clicked !");
},false);
The console show error message says
"Cannot call method 'addEventListener' of null"
Any help !
Thank you for reading.
I am stuck on passing information between my background.js and popup.html!
In this example, I am trying to call testRequest in background.js from popup.html. I have looked at dozens of examples of how to do this and coded as many solutions, but I have not been successful...this is one of the solutions I tried:
Popup.html:
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script type="text/javascript" src="background.js">
$(document).ready(function () {
document.getElementById("test").textContent = chrome.extension.getBackgroundPage.testRequest();
});
</script>
<div id="test"></div>
</body>
</html>
background.js
var testRequest = function(){
return 'yay!';
}
Your help is greatly appreciated!
~Brian
You could use simple message passing to do this. For example:
Popup.html
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<script src="jquery.min.js"></script>
<script src="popup.js"></script>
</head>
<body>
<div id="test"></div>
</body>
</html>
popup.js
$(function() {
chrome.runtime.sendMessage({method:"testRequest"},function(reply){
$('#test').text(reply);
});
});
background.js
chrome.runtime.onMessage.addListener(function(message,sender,sendRepsonse){
if(message.method == "testRequest")
sendResponse(testRequest());
});
function testRequest(){
return "yay!";
}
Inline code is not allowed in popup.html so we move it all to an external file, you were using jQuery already so don't be afraid to use it more, and if you are using it, don't forget to include it.