chromium 桌面

Packaging and distributing your app sounds simple in principle. It’s just software. But in practice, it’s quite challenging.

打包和分发应用程序在原理上听起来很简单。 这只是软件。 但是在实践中，这非常具有挑战性。

I’ve been working on a Python module called Sofi that generates user interfaces. It can deliver a desktop feel while using standard single-page web technologies. For flexibility, I designed it to work through two methods of distribution: in-browser and executable.

我一直在研究一个名为Sofi的Python模块，该模块可生成用户界面。 使用标准单页Web技术时，它可以提供桌面感觉。 为了提高灵活性，我将其设计为通过两种分发方法进行工作：浏览器内和可执行文件。

Running in the browser, it functions much like a normal webpage. You can load it by opening a file, or launch it from your shell. I also built an executable that runs as a packaged app, independent and without external requirements.

它运行在浏览器中，功能类似于普通网页。 您可以通过打开文件来加载它，或者从您的Shell中启动它。 我还构建了一个可执行文件，该可执行文件作为打包的应用程序运行，独立且没有外部需求。

Over time, as I hacked at code in Atom — my editor of choice these days — I remembered that Atom is actually a browser. It uses Node.js as a back end, and the Electron framework for its user interface. This inspired me to start poking at Electron’s internals, hoping to find examples and best practices on how they solved desktop packaging.

随着时间的流逝，当我黑客攻击Atom(这是我如今的首选编辑器)中的代码时，我记得Atom实际上是一个浏览器。 它使用Node.js作为后端，并使用Electron框架作为其用户界面。 这启发了我开始研究Electron的内部结构，希望找到有关如何解决台式机包装的示例和最佳实践。

It didn’t take long for me to discover that it’s all built on top of free and open sourced technologies: the Chromium browser and the Chromium Embedded Framework. This featured easy-to-integrate example customizations that were capable of fulfilling my requirements.

我花了很长时间才发现它们全部建立在免费和开源技术之上：Chromium浏览器和Chromium嵌入式框架 。 这个功能具有易于集成的示例定制功能，可以满足我的要求。

With all this in hand, I got to work.

有了这些，我就可以工作了。

Chromium嵌入式框架 (The Chromium Embedded Framework)

Chromium is the base code that feeds Google’s Chrome browser. It brings together all the elements that render an interface, process user input, and script its functions.

Chromium是Google Chrome浏览器的基本代码。 它汇集了呈现界面，处理用户输入并编写其功能脚本的所有元素。

The Chromium Embedded Framework (CEF) is a group of C functions that that can control that browser. It also provides scripts that help simplify the process of building and compiling it.

Chromium嵌入式框架(CEF)是一组C函数，可以控制该浏览器。 它还提供了有助于简化构建和编译过程的脚本。

Visual Studio Code, Slack, Mattermost, Curse, Postman, and Kitematic are all examples of desktop apps that use Electron. These systems all qualify as websites that exploit the browser underneath with CEF.

Visual Studio Code，Slack，Mattermost，Curse，Postman和Kitematic都是使用Electron的桌面应用程序的示例。 这些系统都可以作为利用CEF开发其浏览器的网站。

If you’re thinking that Python can bind with C and take advantage of these features as well, then you’re right. Look no further than the pycef project to call the CEF wrapper functions directly. However, it does come with the Chromium binary as an added dependency. So if you’re worried about managing complicated support statements, think before you jump.

如果您认为Python可以与C绑定并且也可以利用这些功能，那么您是对的。 可以直接使用pycef项目直接调用CEF包装函数。 但是，它确实附带了Chromium二进制文件作为附加的依赖项。 因此，如果您担心管理复杂的支持声明，请在跳楼之前考虑一下。

In my particular situation, the Sofi project manages all interactions through a websocket, providing a consistent interface across different types of platforms (web, desktop, mobile, etc.). This means I don’t need to manually commanding or drive the browser. I only wish to interact with the DOM that the browser displays through standard web technologies.

在我的特定情况下，Sofi项目通过Websocket管理所有交互，从而在不同类型的平台(Web，桌面，移动等)之间提供一致的界面。 这意味着我不需要手动命令或驱动浏览器。 我只希望与浏览器通过标准Web技术显示的DOM进行交互。

My goal is to customize the UI elements that make a browser look like a browser. I need to remove the menus, toolbars, and status bars. In doing so, I’ll make it appear that we’re in fullscreen mode — but inside an application window.

我的目标是定制使浏览器看起来像浏览器的UI元素。 我需要删除菜单，工具栏和状态栏。 这样做时，我看起来似乎处于全屏模式下-但在应用程序窗口内。

Given my simple requirements, I felt that pycef — or any other lower-level bindings — was too much. Instead I took advantage of a pre-built sample from the CEF project: cefsimple. This browser hides all the visual elements I want, so if I use its CLI to open a webpage, the user has no idea that they’re actually inside a browser. It looks like a regular window from any application.

鉴于我的简单要求，我觉得pycef或其他任何较低级别的绑定都太多了。 相反，我利用了CEF项目中的预构建示例： cefsimple 。 该浏览器隐藏了我想要的所有可视元素，因此，如果我使用其CLI来打开网页，则用户不知道它们实际上在浏览器中。 它看起来像来自任何应用程序的常规窗口。

Building cefsimple wasn’t too complicated once I went through the documentation. But it takes an enormous amount of time if you also build Chromium along with it. To avoid this, the project itself provides pre-built binaries that you can customize and compile into cefsimple. I found it best to take advantage of these.

阅读文档后，构建cefsimple并不太复杂。 但是，如果您还同时构建Chromium，则会花费大量时间。 为避免这种情况，项目本身提供了预构建的二进制文件，您可以对其进行自定义并将其编译为cefsimple。 我发现最好利用这些。

The steps are as follows:

步骤如下：

1. Have a quick look through how to build with CEF from binaries.

   快速浏览一下如何使用二进制文件中的CEF 进行构建 。

2. Grab one of the binary distributions from the repo. Be sure to read the tooltips before selecting one, since not all packages contain the same files. I was specifically looking for one with cefsimple.

   从仓库中获取二进制分布之一。 选择一项之前，请务必先阅读工具提示，因为并非所有软件包都包含相同的文件。 我专门在找cefsimple 。

3. Look through the CMakeLists.txt file and make sure you install the necessary build tools. This is platform specific.

   浏览CMakeLists.txt文件，并确保安装了必要的构建工具。 这是特定于平台的。

4. Perform the build. This is explained in the same file as the previous step and is also platform specific, but it tends to follow the process of: make and cd into build directory, run cmake for your compilation tools and architecture while pointing at the parent directory. Since I used the OSX Ninja tools on a 64-bit platform, the command looked like cmake -G "Ninja" -DPROJECT_ARCH="x86_64" ..

   执行构建。 这在与上一步相同的文件中进行了说明，并且也是特定于平台的，但是它倾向于遵循以下过程：make和cd进入build目录，在指向父目录的同时为您的编译工具和体系结构运行cmake。 由于我在64位平台上使用OSX Ninja工具，因此该命令看起来像cmake -G "Ninja" -DPROJECT_ARCH="x86_64" ..

5. The build directory will now contain the output files. The structure can be a little confusing, but it’s described in the main README. As a reference, the previous step resulted in an app bundle under build/tests/cefsimple/Release/cefsimple.app.

   现在，构建目录将包含输出文件。 该结构可能会有些混乱，但主要README对此进行了描述。 作为参考，上一步产生了build/tests/cefsimple/Release/cefsimple.app下的应用程序捆绑包。

6. Don’t forget you’ll have to do this to create the binaries you need for every platform and OS architecture that your supporting.
   别忘了，您将必须执行此操作来创建支持的每个平台和OS体系结构所需的二进制文件。

Now that you have an executable, run it from command line with --url set to the webpage you want to open. This means that incorporating it into a Python script is easily done through the subprocess module.

既然您已经有了可执行文件，请从命令行运行它，并将--url设置为要打开的网页。 这意味着可以通过subprocess模块轻松地将其合并到Python脚本中。

While not required, if you’re interested in compiling Chromium itself, have a look at the CEF documentation. It will point you in the right direction. But be warned, it takes a lot of time to download, build and compile. Good old fashioned processing horsepower will definitely help get faster results.

尽管不是必需的，但是如果您有兴趣编译Chromium本身，请查看CEF文档。 它将为您指明正确的方向。 但请注意，下载，构建和编译需要大量时间。 好的老式处理能力肯定会帮助您更快地获得结果。

打包 (Packaging)

Now that we can deliver a desktop experience, we have to consider how to distribute that to our users. Traditional Python package distribution is accomplished through the Python Package Index (PyPI). However, it requires our users to install the Python interpreter and some form of packaging tool like easy_install or pip.

现在我们可以提供桌面体验，我们必须考虑如何将其分发给我们的用户。 传统的Python软件包分发是通过Python软件包索引(PyPI)完成的。 但是，它要求我们的用户安装Python解释器和某种形式的打包工具，例如easy_install或pip 。

While this isn’t particularly hard, you should consider the wider range of users. Managing an install process with separate manual steps gets fairly complicated. Especially with non-technical audiences — some of whom don’t know that Python is anything other than a large snake. While others may at least know the air speed velocity of a European unladen swallow.

尽管这并不是特别困难，但您应该考虑更多的用户。 使用单独的手动步骤来管理安装过程变得相当复杂。 尤其是对于非技术人员来说-有些人不知道Python只是一条大蛇。 而其他人可能至少知道欧洲空载燕子的风速。

If they do know the language, most already have their own version installed. This is where package dependencies, different operating systems, browsers you’ve never heard of (or thought were dead by now) come into play, along with users’ varying skills in setting up virtual environments. This tends to translate into a large amount of time spent supporting mismatched software.

如果他们知道该语言，则大多数人已经安装了自己的版本。 这是软件包依赖性，不同的操作系统，您从未听说过(或现在认为已经死掉)的浏览器以及用户设置虚拟环境的各种技能的地方。 这往往会转化为花费大量时间来支持不匹配的软件。

To avoid such a large mess, there are tools that can embed all your dependencies into OS-specific executable files. After careful consideration, the one I chose for my endeavors is PyInstaller. It seems to provide the most flexibility in supported platforms and formats.

为避免造成如此大的混乱，有些工具可以将所有依赖项嵌入到特定于OS的可执行文件中。 经过仔细考虑，我选择的一个是PyInstaller 。 它似乎在受支持的平台和格式中提供了最大的灵活性。

A brief excerpt from their GitHub repository sums things up nicely:

他们的GitHub存储库的简短摘录很好地总结了这些内容：

PyInstaller reads a Python script written by you. It analyzes your code to discover every other module and library your script needs in order to execute. Then it collects copies of all those files — including the active Python interpreter! — and puts them with your script in a single folder, or optionally in a single executable file.

PyInstaller读取您编写的Python脚本。 它分析您的代码以发现脚本执行所需的所有其他模块和库。 然后，它将收集所有这些文件的副本-包括活动的Python解释器！ —并将它们与脚本一起放在单个文件夹中，或者可选地在单个可执行文件中。

The tool delivered on its promise. I pointed it to the Python file for my sample application and it bundles it in a directory easily enough with: pyinstaller sample.py. When I want an executable instead, just add the --onefile parameter.

该工具兑现了承诺。 我将其指向示例应用程序的Python文件，并使用pyinstaller sample.py轻松将其捆绑在一个目录中。 当我需要可执行文件时，只需添加--onefile参数。

It gets a bit trickier when you need to add non-Python data to your bundle. This is the case with the html and js files that form the basis of Sofi, and the cefsimple browser that presents the application interface from earlier. The PyInstaller utility provides --add-data to do just that, allowing a mapping to the path within your bundle where the data file (or directory) will reside. However, it took me a while to figure out how to properly access those directories from within my code. Luckily the documentation pointed me in the right direction.

当您需要将非Python数据添加到包中时，它会变得有些棘手。 构成Sofi的html和js文件就是这种情况，而cefsimple浏览器则提供了较早版本的应用程序界面。 PyInstaller实用程序提供--add-data来执行此操作，从而允许映射到包中数据文件(或目录)将驻留的路径。 但是，花了我一段时间才弄清楚如何从我的代码中正确访问那些目录。 幸运的是，文档为我指明了正确的方向。

As it turns out, when running a PyInstaller bundled application, you can’t rely on __file__ and similar mechanisms to determine paths. Instead, the PyInstaller bootloader stores the absolute path to the bundle in sys._MEIPASS and adds a frozen attribute to let you know that you’re running inside a bundle. If sys.frozen is True then load your files based on sys._MEIPASS, otherwise use normal path functions to determine where things are.

事实证明，在运行PyInstaller捆绑的应用程序时，您不能依赖__file__和类似的机制来确定路径。 相反，PyInstaller引导加载程序将捆绑软件的绝对路径存储在sys._MEIPASS并添加一个frozen属性以让您知道您正在捆绑软件中运行。 如果sys.frozen为True则基于sys._MEIPASS加载文件，否则使用常规路径函数确定对象的位置。

I was able to successfully create both an OSX bundled app and an executable Linux binary of the same Python script. I verified I can do the same with a Windows executable, but haven’t had time to put together a Windows version of the cefsimple browser to test the bundle path yet.

我能够成功创建OSX捆绑的应用程序和相同Python脚本的可执行Linux二进制文件。 我确认可以使用Windows可执行文件执行相同的操作，但是还没有时间将Windows版本的cefsimple浏览器放在一起以测试捆绑包路径。

最终产品 (The Final Product)

For an example of the browser-based user interface packaged with the system described here, have a look at my presentation at PyCaribbean 2017.

对于此处描述的系统打包的基于浏览器的用户界面的示例，请查看我在PyCaribbean 2017上的演示。

The demo relevant to CEF and packaging is of an image gallery and it appears around 18:15.

与CEF和包装相关的演示是一个图片库，它于18:15左右出现。

For additional reading on how I made Sofi, have a look at the A Python Ate My GUI series.

有关我如何制作Sofi的更多信息，请阅读A Python Ate My GUI系列。

---

---

If you liked the article and want to read more about Python and software practices, please visit tryexceptpass.org. Stay informed with their latest content by subscribing to the mailing list.

如果您喜欢这篇文章，并想了解有关Python和软件实践的更多信息，请访问tryexceptpass.org 。 订阅邮件列表，随时了解其最新内容。

翻译自: https://www.freecodecamp.org/news/the-python-desktop-application-3a66b4a128d3/

chromium 桌面