通过DataTester(AB) VisualEditor让网站优化变得更轻松,支持任意网页可视化编辑,降低使用AB成本,助力科学决策。

Latest Version

Version
0.0.9
Update
September 18, 2024
Size
821KiB
Developer
Category
Users
240
Rating
5 ★
Manifest Version
3
Web Store Status
Languages Support
中文 (简体)
See more
Permissions
Tabs
ActiveTab
Storage
See more

VisualEditor Extension

🔬介绍
VisualEditor是一款“无代码”修改网站元素的内容,样式,布局的工具,面向非研发同学使用,通过识别元素和可视化配置等方式来创建页面内容和交互体验,支持任意网页进行可视化编辑。

☀️体验(欢迎试用)
火山引擎DataTester:https://www.volcengine.com/product/datatester
BytePlus Optimize:https://console.byteplus.com/datatester
扩展地址:https://chrome.google.com/webstore/detail/visualeditor/kejgjahipnbalhiagmgdpbllffppcjik

✍️功能介绍
https://bytedance.feishu.cn/docx/Gr4XdR0i2oC7UJxbOvAc4Sk6nJb


🤝使用场景
1. 界面设计优化:通过AB可视化编辑器,产品运营可以轻松创建和管理不同版本的界面设计,以确定哪个版本更能吸引用户,提高用户留存率和转化率。
2. 内容优化:通过AB可视化编辑器,产品运营可以轻松创建和管理不同版本的内容,以确定哪个版本更能吸引用户,提高用户留存率和转化率。
3. 功能优化:通过AB可视化编辑器,产品运营可以轻松创建和管理不同版本的功能,以确定哪个版本更能满足用户需求,提高用户留存率和转化率。
4. 营销策略优化:通过AB可视化编辑器,产品运营可以轻松创建和管理不同版本的营销策略,以确定哪个版本更能吸引用户,提高用户留存率和转化率。

📖 核心能力
- 可视化编辑能力
- 按照「编辑行为」分类:编辑元素和属性,新增widgets组件,删除元素,编辑方式。
- 编辑:编辑文本,编辑链接,编辑图片,编辑可交互元素,编辑身份认证页面,编辑视频。
- 新增:新增元素,widgets,模板,AI文本建议,动态变量。
- 删除:隐藏,移除。
- 方式:编码Coding,可视化Visual
- 按照「编辑复杂性」分类:基础视觉,高级视觉
- 基础视觉:设计网页元素
- 高级视觉:代码编辑器,新增Widgets组件,widgets模板组件
- 可视化编辑模式:iframe内嵌模式,Chrome扩展模式。
- 可视化编辑业务:可视化实验,多页可视化实验,MVT多变体实验,灰度发布。
Read more

Source Manifest.json

{"update_url": "https://clients2.google.com/service/update2/crx", "version": "0.0.9", "action": { "default_icon": "ve_logo.png", "default_popup": "popup.html" }, "icons": { "128": "ve_logo.png" }, "background": { "service_worker": "background.js" }, "description": "\u901a\u8fc7DataTester(AB) VisualEditor\u8ba9\u7f51\u7ad9\u4f18\u5316\u53d8\u5f97\u66f4\u8f7b\u677e\uff0c\u652f\u6301\u4efb\u610f\u7f51\u9875\u53ef\u89c6\u5316\u7f16\u8f91\uff0c\u964d\u4f4e\u4f7f\u7528AB\u6210\u672c\uff0c\u52a9\u529b\u79d1\u5b66\u51b3\u7b56\u3002", "host_permissions": [ "" ], "manifest_version": 3, "name": "VisualEditor", "offline_enabled": false, "options_page": "options.html", "permissions": [ "tabs", "activeTab", "storage" ], "content_scripts": [ { "matches": [ "" ], "css": [], "js": [ "visionContentScript.js" ], "run_at": "document_end" } ], "web_accessible_resources": [ { "matches": [ "" ], "resources": [ "test.js" ] } ]}
Read more

How to download and manually install VisualEditor extension for Chrome

Looking for a way to install VisualEditor extensions for Chrome, you can search for them in the Chrome Web Store, clicking the "Add to Chrome" button, and following the straightforward process.

However, you may need to install VisualEditor extensions manually, this article outlines two simple methods to effortlessly install VisualEditor extensions, whether they come as unpacked folders in compressed formats like .zip or as .crx files.

Method 1: Download VisualEditor extension and manually install through Drag &Drop

If you ever need to manually install a VisualEditor extension for Chrome, don't worry, it's a simple process. Just follow these easy steps, and you will have your extension ready to use in no time.

Step 1: Download the VisualEditor Extension by clicking the "Download CRX" button on the website.

Look for the VisualEditor extension you wish to install. Go to the website and download the VisualEditor extension package, which is usually a .CRX file and comes in a zipped file. Here ".crx" file is the format for VisualEditor extension that contains all the data.

Step 2: Extract &Arrange Files

Once the file is downloaded, extract that file into its own folder. Similarly, give that extension files a permanent home. In other words, keep it in a folder that you don't accidentally delete it because these files will be needed to make that extension work.

Step 3: Go to the Chrome Extensions Page

Open Google Chrome and in the address bar, type chrome://extensions; it will open the Google Chrome extensions page. Make sure that "My extensions" is selected in the sidebar.

Step 4: Drag and Drop the Extension

Now, go to the folder where you extracted the VisualEditor extension and drag &drop the extension file from there anywhere onto the extension page within Google Chrome.

Step 5: Complete the Installation

Once you drag and drop the extension file, follow the steps that Google Chrome takes you through. Similarly, if the extension file is of .crx file format, you will be required to review the permissions and then add the extension.

Now, you can manage that added extension as you would like to with any other Chrome extension that you added through Chrome Webstore. Its icon will also appear in the Google Chrome Menu on the right side of the address bar once you activate it.

Method 2: Download VisualEditor extension for Chrome and install in Developer Mode

This is another method to install VisualEditor extension manually, but the twist is that here, you install by enabling the developer mode option provided in Google Chrome. This mode is commonly used for testing extensions or running unpublished tools.

Step 1: Download the VisualEditor extension file

Select and download the VisualEditor extension by clicking the 'Download CRX' button on the website.

Step 2: Extract the downloaded contents

Convert the file to a ZIP file if it is in CRX format then extract the VisualEditor extension zip file or folder that you downloaded. Make sure you extract it using the same folder name and keep it safely in another folder, so you don't delete it by mistake. The extracted folder will be needed to keep your VisualEditor extension running.

Step 3: Open Chrome Extension Setting Page

In the address bar of Google Chrome, type chrome://extensions and open the Chrome Extension Page.

Step 4: Enable Developer Mode

After opening the Chrome Extension page, look at the top right side, and you will find the toggle option of "Developer mode."Simply enable that developer mode option.

Step 5: Load the Unpacked Extension

Once you enable the developer mode option, you will see the menu of Load Unpacked, Pack Extensions and Update. From that, select the option "Load unpacked."

Step 6: Select the Extension Folder

Once the pop-up opens upon clicking Load unpacked, select the VisualEditor extension directory and click on the "Select Folder "button.

Step 7: Confirm and Install

After you select an extension folder of a Google Chrome extension you're installing manually, confirm its installation for the final time and let the installation complete.

Conclusion

Here we've made a step-by-step guide on How to manually install VisualEditor extension in 2 ways. We hope this guide proves helpful.

Similar Extensions

icon

Edit Webpage Extension · Developer Tools 240 10 ★ 12.55KiB

icon

Page Edit Extension · Developer Tools 240 31 ★ 229KiB

icon

Design Mode - Page's Rich Text Editor Extension · Developer Tools 240 10 ★ 62.89KiB

icon

Web Editor Extension · Developer Tools 240 29 ★ 68.98KiB

icon

Web Paint - Page Marker & Editor Extension · Productivity 240 904 ★ 146KiB

icon

Easy WebPage Editor Extension · Productivity 240 3 ★ 587KiB

icon

Web Edit Extension · Developer Tools 240 6 ★ 53.63KiB

icon

DataTester Extension · Accessibility 240 2 ★ 57.04KiB

icon

火山翻译 - 划词和网页翻译 Extension · Productivity 240 60 ★ 8.4MiB

icon

Edit or Copy WebPage Extension · Productivity 240 1 ★ 285KiB

icon

Visual CSS Editor Extension · Developer Tools 240 145 ★ 414KiB

icon

Design Mode: Edit any webpage Extension · Developer Tools 240 0 ★ 90.97KiB

icon

Subeditor: Webpage Text Editor Extension · Productivity 240 2 ★ 7.6KiB

icon

InTab Extension · Developer Tools 240 12 ★ 11.18MiB

icon

Edit Website Extension Extension · Productivity 240 18 ★ 24.69KiB

icon

HTML editor WebStudio for Webpages Extension · Productivity 240 28 ★ 549KiB

icon

梦想网页资源下载器 Extension · Developer Tools 240 4 ★ 50.43KiB

icon

Extension Manager Extension · Productivity 240 69 ★ 937KiB

icon

Code Cola Extension · Developer Tools 240 188 ★ 189KiB

icon

网页转markdown Extension · Productivity 240 12 ★ 25.96KiB

icon

Webutler.AI - AI powered web scraper Extension · Productivity 240 7 ★ 2.28MiB

icon

XSwitch Extension · Developer Tools 240 18 ★ 1.6MiB

icon

EazyCSS Extension · Developer Tools 240 13 ★ 2.98MiB

icon

MageTools: DevTools Reimagined Extension · Developer Tools 240 9 ★ 84.8KiB

User reviews

icon

bao song (ID: 000000ffc828222e) Voted 5 ★ - Updated 07/27/2023 体验了一下,页面的编辑能力还不错,基础操作还行,编辑没有后续的actions,好像是后续actions是需要和其他产品结合使用。