Build a Chrome Extension App that Runs on iOS: Step‑by‑Step Guide
This tutorial walks you through creating a Chrome extension that functions as a standalone app, implementing a GitHub repository search, packaging it with CCA, and running it on iOS simulators or devices, complete with manifest setup and code examples.
Create a Chrome Extension App
The extension app implements a search box that, after input, queries GitHub for repositories with matching names.
Write manifest.json Create the Chrome app's loading page
Write the loading page content
Use Chrome's extension loading code
manifest.json
The app's configuration file follows a fixed format. A simple example:
{
"manifest_version": 2,
"name": "chrome extension search",
"version": "1.0",
"app": {
"background": {
"scripts": ["scripts/main.js"]
}
},
"permissions": [
"https://api.github.com/search/repositories"
]
}Create the Chrome app loading page
Since the entry point is a JavaScript file, we need a UI to display data and handle interaction. Chrome's API creates a window when the app launches:
chrome.app.runtime.onLaunched.addListener(function() {
var screenWidth = screen.availWidth;
var screenHeight = screen.availHeight;
var width = 500;
var height = 300;
chrome.app.window.create('index.html', {
id: "chromesearch1",
outerBounds: {
width: width,
height: height,
left: Math.round((screenWidth - width) / 2),
top: Math.round((screenHeight - height) / 2)
}
});
});Write the loading page content
Sample HTML for the entry page:
<body>
<h1>Search !!!</h1>
<div class="container">
<input type="text" class="input">
<div></div>
</div>
</body>
<script type="text/javascript" src="scripts/jquery.min.js"></script>
<script type="text/javascript" src="scripts/script.js"></script>Chrome extensions cannot contain inline scripts for security reasons, and loading scripts from third‑party CDNs is also prohibited.
To load the extension locally, open Chrome → More tools → Extensions, enable Developer mode, and click “Load unpacked” to select the project root.
Run the Chrome app on macOS iOS simulator
Prerequisites: latest Node, Xcode, npm install -g ios-deploy ios-sim, optional iOS developer account,
npm install -g ccaCheck the environment with cca checkenv . Expected output: iOS Development: SDK configured properly.
Create a project
// Empty project
cca create YourApp
// Link to existing manifest
cca create YourApp --link-to=path/to/manifest.json
// Copy Chrome app files
cca create YourApp --copy-from=path/to/manifest.jsonPublish
Run the following scripts to preview in the simulator or on a real device:
// Run in simulator
cca emulate ios
// Run on real device (requires developer account)
cca run iosIf you modify code, re‑prepare the project: cca prepare Debugging can be done via the browser’s developer tools; only a few issues require device‑level debugging.
Summary
Hybrid development offers various approaches; Google’s CCA (Cordova Chrome App) can package Chrome extensions into cross‑platform apps with pure front‑end code.
CCA is no longer receiving new features, but it remains functional as it builds on Apache Cordova.
The workflow is similar to Ionic, though Ionic provides more comprehensive documentation and components.
Code References
First part example code: link
References
Chrome event lifecycle • Official docs for running Chrome apps on mobile
Signed-in readers can open the original source through BestHub's protected redirect.
This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactand we will review it promptly.
Tencent IMWeb Frontend Team
IMWeb Frontend Community gathering frontend development enthusiasts. Follow us for refined live courses by top experts, cutting‑edge technical posts, and to sharpen your frontend skills.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.