atom-shell 浏览器应用:自定义窗口打开URL

需积分: 9 0 下载量 37 浏览量 更新于2024-11-02 收藏 2KB ZIP 举报
Atom Shell 是一个由 GitHub 开发的开源框架,它允许开发者使用 JavaScript、HTML 和 CSS 来创建跨平台的桌面应用程序。Atom Browser 利用这一框架,在不依赖传统浏览器的情况下,提供了一个可定制的浏览器界面。开发者可以通过简单的命令行指令 atom-browser 后跟需要打开的网址以及可选的窗口宽度和高度参数来使用该工具。 Atom Browser 的功能可以归结为以下几点: 1. 使用 Atom Shell(Electron)构建:Atom Browser 借助于 Electron 底层技术,这意味着它继承了 Electron 的所有特性,包括跨平台性(支持 Windows、macOS 和 Linux)、强大的渲染能力(Chromium)以及能够访问本地系统资源。 2. 命令行界面(CLI):它提供了一个简单的命令行接口,用户可以在命令行中输入 atom-browser 并跟随网址参数来打开一个新的浏览器窗口。这种方式对于开发者和终端用户来说都是快速直接的。 3. 自定义浏览器窗口:除了打开标准的网页外,Atom Browser 允许用户自定义打开窗口的尺寸,通过在命令后添加 width 和 height 参数,用户可以指定窗口的初始宽度和高度。 4. 开源项目:Atom Browser 本身是一个开源项目,托管在 GitHub 上(***),这不仅使得源代码的查看和修改成为可能,而且也便于社区贡献代码和共同改进项目。 5. 全局安装:通过 npm(Node.js 的包管理器)可以全局安装 Atom Browser,使其在系统的任何地方都能被调用,无需安装额外的依赖,这为开发者提供了极大的便利。 Atom Browser 的使用方法简单明了,只需通过 npm 安装后即可在命令行中使用。安装命令如下: ```sh npm install -g seanewest/atom-browser ``` 安装完成后,用户只需在命令行输入 atom-browser 以及想要访问的网址,如: ```sh atom-browser *** ``` 如果需要指定窗口大小,可以添加 width 和 height 参数,例如: ```sh atom-browser *** ``` 这将会以宽度为800像素、高度为600像素的大小打开指定的网页。Atom Browser 的应用场景包括但不限于自动化测试、快速查看网页源码、临时浏览或是在没有安装传统浏览器的环境中需要快速查看网页的场景。 总的来说,Atom Browser 是一个简洁实用的工具,它展示了如何通过 Electron 技术快速创建轻量级的自定义浏览器应用。对于那些需要快速在本地环境中打开网页,且对浏览器外观和功能有特定需求的开发者而言,Atom Browser 提供了一个方便快捷的解决方案。"
154 浏览量
Atom Shell 现已改名为 Electron atom-shell 是 GitHub 随 Atom 一起开源的跨操作系统(Windows,Linux,MacOS X)的利用 Web 技术(Node.js、JavaScript、HTML 5)开发桌面应用的框架。Atom即构建在 atom-shell 之上。 与 Node-Webkit 的区别 atom-shell 和Node-Webkit很像,那么两者有什么区别呢? 1. 程序入口 Node-Webkit 的程序入口是一个网页,你在package.json中指定主页,然后这个主页会在浏览器中打开,作为应用程序的主窗口。 atom-shell 的程序入口则是一个 JavaScript 脚本,而不是直接指定一个 URL。你需要手动创建浏览器窗口,并通过相应的 API 加载 html 文件。你同时需要监听窗口事件以便决定何时退出应用。 因此,atom-shell 更接近 Node.js 运行时,API 也更加底层,你可以利用 atom-shell 进行 web 测试,类似phantomjs。 2. 编译系统 atom-shell 使用libchromiumcontent访问 Chromium 的 Content API,这样编译 atom-shell 的时候就不用编译整个 Chromium (编译 Chromium 非常费时)。 顺便提一下,GitHub 开发者还创建了brightray库,让 libchromiumcontent 的使用更方便。 3. Node 集成 Node-Webkit 的 Node 集成需要给 Chromium 打补丁才能工作。atom-shell 通过集成 libuv loop 和 平台的 message loop 避免给 Chromium 打补丁。 4. Multi-context Node-Webkit 创造了 Node context 和 web context 的概念,而 atom-shell 没有引入新的 context,而是直接使用 Node 的 Multi-context 特性(这一特性是 Atom 开发者赞助 Node 添加的)。 作者 GitHub 最初考察了 Node-Webkit,但是最终还是决定雇佣@zcbenz来开发想要的框架。于是 atom-shell 诞生了。 一个最简单的 hello atom 示例项目请看 hello-atom 主程序示例: var app = require('app');  // Module to control application life. var BrowserWindow = require('browser-window');  // Module to create native browser window. // Report crashes to our server. require('crash-reporter').start(); // Keep a global reference of the window object, if you don't, the window will // be closed automatically when the javascript object is GCed. var mainWindow = null; // Quit when all windows are closed. app.on('window-all-closed', function() {   if (process.platform != 'darwin')     app.quit(); }); // This method will be called when atom-shell has done everything // initialization and ready for creating browser windows. app.on('ready', function() {   // Create the browser window.   mainWindow = new BrowserWindow({width: 800, height: 600});   // and load the index.html of the app.   mainWindow.loadUrl('file://'   __dirname   '/index.html');   // Emitted when the window is closed.   mainWindow.on('closed', function() {     // 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.     mainWindow = null;   }); }); 支持很多桌面应用特性,例如 Dock 菜单等: 使用 Dock 菜单的方法: var app = require('app'); var Menu = require('menu'); var dockMenu = Menu.buildFromTemplate([   { label: 'New Window', click: function() { console.log('New Window'); } },   { label: 'New Window with Settings', submenu: [     { label: 'Basic' },     { label: 'Pro'},   ]},   { label: 'New Command...'}, ]); app.dock.setMenu(dockMenu); PS:网易也有开放了Hex,同样是不满意node-webkit,就自己做了套. 标签:AtomShell  GUI开发框架