I have a custom Chrome dev tools extension panel which I want to search in. The panel and search are setup by this code (in devtools.js).
chrome.devtools.panels.create("SF Assist", "assets/logo64.png", "panel.html", function (panel) {
panel.onSearch.addListener(function (event) {
alert('search');
});
});
This loads panel.html, the html loads panel.js which builds the content of the tab. Panel.js communicates with the inspected tab and pulls a lot of information back. The code above hooks the onSearch event when a user does a search in the dev panel. The data is in panel.js but the hook is above. How do I communicate from this code to my panel.js?
As mentioned in the comments, communication between devtools.js and panel.js is via messaging. Needed to add messaging to devtools, panel.js already had the listener setup for communicating to the background script.
devtools.js
chrome.devtools.panels.create("SF Assist", "assets/logo64.png", "panel.html", function (panel) {
chrome.runtime.onConnect.addListener(function (port) {
console.log('dev tools connect listener', port);
var extensionListener = function (message, sender, sendResponse) {
console.log('dev tools listener received message', message, port);
}
port.onMessage.addListener(extensionListener);
var searchPanel = function (event, queryString) {
console.log('dev tools search', event, queryString);
port.postMessage(...);
}
panel.onSearch.addListener(searchPanel);
});
});
Related
I'm trying to make a simple app that should display notification when button is clicked. The problem is that the notification does not show, but console.logs are showing. Should the notification work on development mode? (meaning just running electron ., and I don't have to build and install the app)
Windows OS:
Edition: Windows 10 Home
Version: 1709
Build:16299.98
NOTE: Toast is enabled (banner, action center) under System->Notification & Actions
Code:
// main.js
const { app, BrowserWindow, ipcMain, Notification } = require("electron");
const path = require("path");
const url = require("url");
let win;
function createWindow() {
// Create the browser window.
win = new BrowserWindow({ width: 800, height: 600 });
// and load the index.html of the app.
win.loadURL(
url.format({
pathname: path.join(__dirname, "index.html"),
protocol: "file:",
slashes: true
})
);
// Open the DevTools.
// win.webContents.openDevTools()
// Emitted when the window is closed.
win.on("closed", () => {
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
win = null;
});
}
const appId = "elite-notifier";
app.setAppUserModelId(appId);
app.on("ready", createWindow);
console.log("notifying");
ipcMain.on("notify", () => {
console.log("notified");
const WindowsToaster = require("node-notifier").WindowsToaster;
const notifier = new WindowsToaster({
withFallback: false
});
notifier.notify(
{
title: "My awesome title",
message: "Hello from node, Mr. User!",
sound: true, // Only Notification Center or Windows Toasters
wait: false // Wait with callback, until user action is taken against notification
},
function(err, response) {
// Response is response from notification
console.log("responded...");
}
);
});
// index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1>Notifier!</h1>
<button type="button" id="notify">Click here to trigger a notification!</button>
<script type="text/javascript">
const { ipcRenderer } = require('electron');
const button = document.getElementById('notify');
console.log('BUTTON: ', button)
button.addEventListener('click', function(event) {
console.log('clicked...');
ipcRenderer.send('notify')
});
</script>
</body>
</html>
I've got it working now, thanks to all the people here :) https://github.com/mikaelbr/node-notifier/issues/144#issuecomment-319324058
Based on anthonyraymond's comment, you need to have your app INSTALLED in your windows machine with an appId. You can configure appId in your package.json like this.
{
"name": "myapp",
"version": "1.0.0",
"description": "test",
"main": "main.js",
"build": {
"appId": "com.myapp.id"
}
}
The appId does not need to have that java/android format, my app just have an appId of elite-notifier.
Then you can pass the appId when calling the notify function of notifier.
notifier.notify(
{
appName: "com.myapp.id", <-- yes, the key here is appName :)
title: "Hello",
message: "Hello world!",
wait: true
},
function(err, response) {
// Response is response from notification
console.log("responded...");
}
);
After installation, This will work even on development mode (by running electron . command) provided that you'll not change the appId of your app after installation since there will be a mismatch on the installed one and the development version of the app.
You don't need to use IPC and send notifications from the main process, this is supported from the renderer process using the HTML5 notification API.
let myNotification = new Notification('Title', {
body: 'Lorem Ipsum Dolor Sit Amet'
})
myNotification.onclick = () => {
console.log('Notification clicked')
}
I've also tried many things, but sometimes it works or not.
At last, I've found a way. This works well for not only "npm run dev", but also package built.
use Notification at renderer process.
register app id at package.json
"build": {
"appId": "my app id",
...
call app.setAppUserModelId("my app id") at main process (https://electronjs.org/docs/api/app#appsetappusermodelidid-windows)
Here app id can be any type of string.
This error doesn't need any configuration all you have to do is go to your setting and enable notification Because in some cases on your computer you just switched off notifications.
System Setting ->Notification & Actions
Then turn on Notification By clicking the switch (problem solved)
You can do this, it works for me even on windows 10.
in package.json
"build": {
"appId": "your.custom.app.id",
}
in main.js
app.setAppUserModelId("your.custom.app.id");
I'm trying to make a messenger bot and chat extension.
I set the home_url
whitelisted the URL
Loaded the SDK correctly
doing everything inside window.extAsyncInit
And all the tests I'm doing are inside the messenger app in mobile.
But when I open the chat extension normally inside a chat thread and try to use,
getContext() or any other method
Nothing happens.
i.e.
<script type="text/javascript">
window.extAsyncInit = function () {
MessengerExtensions.getContext('I pasted my app id here without quotes',
function success(result){
alert("Success: "+result.psid);
},
function error(result){
alert(JSON.stringify(result));
}
);
};
</script>
and when I try to do this,
alert(JSON.stringify(MessengerExtensions))
it shows
{"AppleMusic":{}}
what am I missing?
-Follwing is the jquery code I have written in my (dashboard.html) file
<script>
$(function(){
$("#username").hide();
var socket= io.connect();
$(document).on("click", ".help", function () {
alert( $(this).attr('id'));
socket.emit('help',{helper:$username.val(),requester:$(this).attr('id')});
});
});
---On clicking help button socket will emit an event "help" as you can see in the code.
---Following is the app.js file on server
io.sockets.on('connection',function(socket){
socket.on('help',function(data){
console.log('rohi is goood',data.helper);
socket.emit('loadList' , {helper:data.helper,requester:data.requester});
});
});
---On "help" event socket is emitting an event "loadList" in app.js file.
Now I want to use "loadList" event in some other html file like "chat.html".
The code I have written is as follows for chat.html.
<script>
$(function(){
// var socket= io.connect();
// var socket= io.connect('http://localhost:3000/', { 'force new //connection': true });
socket.on('loadList',function(data){
alert('inside help',$('#usernam').val());
console.log('tatai',$('#usernam').val());
if($('#usernam').val()== data.helper){
$('#chatList').append('<p>'+data.requester+'</p>'+'<button value="chat"></button>');
}
else if($('#usernam').val() == data.requester){
$('#chatList').append('<p>'+data.helper+'</p>'+'<button value="chat"></button>');
}
else {
alert('fuck off');
}
});
The above code is not working. Please tell me how can I use same socket connection in the chat.html file.(loadList event is not working).
As your question is not complete so i am assuming you want to know if socket.io connection can be used on different html pages . Yes you can access it on every html page of your application as long as you have one server on which socket.io is used .
Every time a new user comes a socket session is created for that particular user and that user can access any page of your application .
I am using the setInterval() function to update a few variables(prices from various API's) every 'x' seconds in NodeJS
I want to display these variables in HTML and have them update real time every 'x' seconds.
How do I go about this using Socket.io or without using it
If you don't want to use socket.io, you can use AJAX calls but I think it's the more painful way...
If you use socket.io, there are great examples on their GitHub : Chat example.
In your NodeJS :
var io = require('socket.io')(8080); // The port should be different of your HTTP server.
io.on('connection', function (socket) { // Notify for a new connection and pass the socket as parameter.
console.log('new connection');
var incremental = 0;
setInterval(function () {
console.log('emit new value', incremental);
socket.emit('update-value', incremental); // Emit on the opened socket.
incremental++;
}, 1000);
});
This code should be start in your application.
And in your view :
<html>
<body>
<pre id="incremental"></pre>
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
var socket = io('http://localhost:8080'); // Connect the socket on the port defined before.
socket.on('update-value', function (value) { // When a 'update-value' event is received, execute the following code.
console.log('received new value', value);
$('#incremental').html(value);
});
</script>
</body>
</html>
My code isn't complete but shows the essential to know.
Try Templating and template engines.
Template engine are stuff that enable you to pass variables to Templates. These engines render the template file, with data you provide in form of HTML page.
I will suggest you to try 'ejs', as it very closely signify HTML files. ejs template are simply HTML syntax with placefolder for you to pass Data.
But that will require you to refresh the page continously after regular time. So you can try 'AJAX' which let you refresh part of page, simultaneously sends and receives data from server
I have a nodeJS application using express and socket.io. I would like to osolate some code so that it only runs on one page that I serve. To do this I have used express to listen to the request and feed a html page as a response.
app.get('/archive', function(request, response) {
response.sendfile(__dirname + "/views/table.html");
}
I also have a socket.io function that listens and sends the data to the html page.
io.sockets.on('connection', function(socket) {
channel.subscribe('cheat', function(message) {
socket.emit('message', message);
});\
Everything runs great when the code is like this but as soon as I try and put the socket.on function inside the app.get function I have issues. The first request works perfectly but when the page is refresh all the data gets duplicated. The first time it is x2 then x3 then x4 and so on. Does anyone know why this is happening?
This is what my final code looks like:
app.get('/archive', function(request, response) {
response.sendfile(__dirname + "/views/table.html");
io.sockets.on('connection', function(socket) {
channel.subscribe('cheat', function(message) {
socket.emit('message', message);
});
}
You should not put a Socket.IO connection listener inside a HTTP route. The connection event for the Socket.IO object is called each time there is a connection, so if you make a new connection listener each time the HTTP route is called, then you will have duplicate listeners which will all fire when there is a connection.
If you don't want Socket.IO on a certain page, don't include the client script on that page. Otherwise, an alternative method to do this is to store the client path in a cookie, and access that cookie during authorization. Then you can accept or deny the client.
I used the url.parse function to get the name of the page like so:
var curURL = url.parse(request.url).pathname;
Then I can check the current URL
if (curURL == '/') {
//code
}
As for the problem with duplicate values, I forgot to unsubscribe on exit. After subscription.unsubscribe(); it all works.