npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

electron-browser

v1.0.12

Published

``` js const { Browse,sittingMenu,ChildWinInterface,addresButton } = require('electron-browser');

Downloads

4

Readme

通过electron封装的类浏览器工具

使用方法:

在你的main中

const { Browse,sittingMenu,ChildWinInterface,addresButton } = require('electron-browser');

const statics = require('koa-static');

function popupMenu(data,menu){
    menu.push({
        label: '自定义按钮',
        accelerator: (function () {
        })(),
        click: function (item, focusedWindow) {
             console.log("点击了自定义按钮")
        }
    });
    return menu;
}


sittingMenu.divider2 = { type: "Divider"}
sittingMenu.menu1 = { title: "自定义菜单", on: () => { } }



/**
 *  地址栏右侧的按钮 
 * */
class AddBut extends ChildWinInterface {

}
addresButton.zdy = {
    icon: "EyeInvisibleOutlined", // andt icon
    obj: new AddBut()
}



let conf = { 
    indexHost: "http://localhost:5800",//自定义主页路径 
    httpsPort: 5802, //不填默认5802
    httpPort: 5803, //不填默认5803
    port: 5800, //不填默认5800
    thousandsOfCallBackFolder:"/thousandsOfCallBackFolder", //千里传音的路径,无需求可不填
    newTabUrl:"http://localhost:5800/view/empty",//   默认 /empty
    popupMenu:popupMenu, //右击网页弹出的菜单
    sitting: sittingMenu,//  自定义菜单
    addresButton:addresButton,//浏览器右侧的按钮

}



let brose = new Browse(conf); //启动

const koa = brose.koa; //会运行一个koa 用来通信,我们也可以利用这个来部署一些请求的响应
const socketIO = brose.socketIO;
const httpsServer = brose.httpsServer;
const httpServer = brose.httpsServer;


koa.use(statics( './path')); //选定网页的静态文件

千里传音 thousandsOfCallBack

这是网页端给electron发送消息的工具 通过 http://localhost:5800 的socket实现

网页端代码

 import io from 'socket.io-client';

    const socket = io('ws://127.0.0.1:5800'); //指向本地 端口需要是httpsPort
    socket.on('connect', () => {
    console.log('socket 连接成功');

    webContentsId = ThousandsOfCall.getWebContentsId();

    socket.on('message', async (data: any) => {
        //收到来自服务器的消息,一般是进度消息
        let uid=data.uid;//uid 发布送消息的uid
              
     });


     //发送消息给服务器

      let value = {
                data, //提交的数据
                type, // 提交类型对应服务器处理js 服务器端需要对应的处理函数 (例:loginTB)
                uid, //UUID.v1();
      };

     socket.send(value, (res: { data: any }) => {
          //收到结果,最终结果
        let da = res.data;
        let uid=data.uid;//uid 发布送消息的uid
      });

服务器端代码

1、创建一个对应的文件夹(例 /thousandsOfCallBackFolder),在conf中制定路径

let conf = { 
    thousandsOfCallBackFolder : path.resolve("./thousandsOfCallBackFolder"),
    ...
}


let brose = new Browse(conf); //启动

2、在/thousandsOfCallBackFolder 下创建对应的处理类型需要和网页端对应(例:loginTB.js)

loginTB.js



module.exports = class LoginTB {

    static handle({ data, callback, event }) {
       //data 前端传入的数据
      // callback  最终返回的数据调用
      //event 进度数据调用


      for(let i=0;i<5;i++){
           event({progress:`${i*20}%`})
       } 

       callback({data:"我处理好了"})


    }}