整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
IT168 資訊】微軟于今日宣布了向公眾開放GitHub上的Office UI Fabric項目，該公司稱：Office UI Fabric是一個移動優先、專為開發人員而打造的響應式框架，旨在幫助其通過早已熟悉的Office設計語言來創建基于web的體驗。該項目自詡可以非常簡單地打造一個全新的插件，或者為現有的附加組件加入新功能。
微軟還指出，用戶可以通過簡單的CSS樣式來變更應用程序的界面(比如排版、顏色、甚至動畫)，以使其和其它Office套件相處得更加融洽。
其實該框架此前已被用于微軟自家Office 365等諸多產品，不過新項目還帶來了事無巨細的Office UX Design Guidelines(用戶體驗設計指南)。
控制方面，微軟一直在部署可用于Office Add-ins、SharePoint Add-ins、甚至單獨網站的新功能。比如Office UI Fabric中的Detailed Persona Card就可以在轉換后成為一個綁定的控件。
天給大家分享一個超厲害的Vue Uniapp可視化拖拽編程項目dragUI。
drag-ui 基于 vuedraggable.js+vue+uniapp 的可視化拖放布局編程。能自動生成項目，自動生成代碼，支持導入第三方組件。
效果圖
dragUI演示視頻
一個簡單創建 hello world 界面的介紹視頻，幫助大家更快了解項目。
<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
# 克隆項目
git clone https://github.com/wozhishilaonanhai/dragUI.git
# 進入dragUI目錄
cd dragUI
# 安裝依賴包
npm install
# 用HBuilderX打開項目
運行 > 運行到瀏覽器 > Chrome項目目錄注釋
作者已經將該插件上傳到了插件市場，大家可以下載使用。
https://ext.dcloud.net.cn/plugin?id=1035store中 componentsInfo 存貯組件的基本信息。
componentsInfo: { // 組件的基本信息
// id 0- 999 （約定）會根據id來判斷是哪個list
list: [
{
name:'按鈕',
id: 0,
componentName: 'Ibutton',
iStyle:{},
iClass: [],
propsValue: [
{
label:'值',
key:'text',
value:'按鈕',
toDataOrHtml: 'html',
type: 'String'
},
{
label:'類型',
key:'type',
value:'default',
toDataOrHtml: 'html',
type:'select',
select: [
{label: '紅色',value: 'warn'},
{label: '藍色',value: 'primary'},
{label: '白色',value: 'default'}
]
},
...
]
},
...
]
}項目中用到了 element-ui 組件庫及第三方UI庫 colorUI。
創建新項目
切換頁面模式/組件模式
布局預覽效果
查看uniapp頁面代碼
最后附上demo及項目地址
# demo地址
https://wozhishilaonanhai.github.io/dragUI/unpackage/dist/build/h5/index.html
# 倉庫地址
https://github.com/wozhishilaonanhai/dragUIok，這次就分享到這里。如果小伙伴們感興趣的話可以去看下哈。
著入職時間變長，工作不斷的深入，在需要同時處理多個任務的同時，打開幾十上百個瀏覽器 Tab 頁就必不可少了，而我的工作幾乎都是在各種瀏覽器 Tab 頁之間來回切換，如寫文檔、學習新知識、處理 Bug 單流轉、上線等流程，所以我需要對瀏覽器的 Tab 頁進行精細化管理，以達到精細化管理工作流程的目的，于是乎，我對于瀏覽器的使用變成了下面幾個階段：
Chrome - 雜亂無章階段
Chrome - 進行適當整理
Edge - 豎向側邊欄
但是無論瀏覽器層面提供多少這樣或那樣的輔助，但畢竟瀏覽器的職責主要是負責幫助你更好、更快、更高效的瀏覽網頁，并非是幫你管理知識和工作流程，所以如果需要個性化定制的需求，就得自己上手開發啦！畢竟作為程序員，自己動手，豐衣足食嘛 。
我希望能夠開發一個 Chrome 瀏覽器插件，當前其他瀏覽器如 Edge、Firefox、Brave，以及其他所有使用 Chromimum 開發的瀏覽器都是支持 Chrome 插件格式的，而這幾大瀏覽器幾乎占據了近 83% 左右的桌面端瀏覽器市場，所以這個 Chrome 插件可以在我喜歡的瀏覽器上運行。
以下是 2020.3 到 2021.3 的桌面端瀏覽器占比數據
這個瀏覽器支持傳統的插件點擊彈出欄，以及每次打開一個新 Tab 都能展示我的應用，這樣能夠幫助我隨時了解我當前正在進行的工作，大致形式如下：
彈出欄：
新 Tab：
針對上面需求的形式不知道大家是否比較熟悉了？沒錯，這個插件的框架形式和 掘金 的插件類似，我們看下掘金的 Chrome 插件：
彈出框：
新 Tab：
也就是說，在看完本次文章，你基本上擁有了開發一個掘金插件的能力，心動了？
隨便一提，我們本次開發插件的技術棧如下：
通過先進的技術棧來編寫 Chrome 插件。
Chrome 插件實際上包含幾個部分：
上述 5 大文件組成了一個 Chrome 插件所需要的必須元素，邏輯關系如下：
image.png
可以看到，其實開發一個 Chrome 的插件也是使用 HTML/JavaScript/CSS 這些知識，只不過使用場景，每種 JavaScript 使用的權限與功能、操作的 API 不太一樣，那么既然是使用基本的 Web 基礎技術，我們就可以借助更為上層的 Web 開發框架如 React 等來將 Chrome 插件的開發上升到一個現代化的程度。
確保你安裝了最新版的 Node.js，然后在命令行中運行如下命令：
npx create-react-app chrome-react-extension --template typescript
初始化好項目、安裝完依賴之后，我們可以看到 CRA 產生的模板代碼，其中就有我們需要的 public/manifest.json 文件：
當然內容并沒有我們上圖那樣豐富我們需要做一些修改，將內容改為如下內容：
{
"name": "Chrome React Extension",
"description": "使用 React TypeScript 構建 Chrome 擴展",
"version": "1.0",
"manifest_version": 3,
"action": {
"default_popup": "index.html",
"default_title": "Open the popup"
},
"icons": {
"16": "logo192.png",
"48": "logo192.png",
"128": "logo192.png"
}
}
上述的字段說明如下：
實際上 Chrome 插件只能理解原生的 JavaScript，CSS，HTML 等， 所以我們使用 React 學完之后，需要進行構建，將構建的產物打包給到瀏覽器插件去加載使用，在構建時，還有一個需要注意的就是，為了保證最優化性能，CRA 的腳本在構建時會將一些小的 JS 文件等，內聯到 HTML 文件中，而不是打包成獨立的 JS 文件，在 Chrome 插件的運行環境下，這種形式的 HTML 是不支持的，會觸發插件的 CSP（內容安全策略）錯誤。
所以為了測試我們的插件當前效果，我們修改構建腳本，在 package.json 里面：
"scripts": {
"start": "react-scripts start",
"build": "INLINE_RUNTIME_CHUNK=false react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
通過設置 INLINE_RUNTIME_CHUNK=false 確保所有的 JS 會構建成獨立的文件，然后引入到 HTML 中加載使用。
一切準備完畢，是時候構建我們的 React 應用了~ 在命令行中運行如下命令：
npm run build
會發現內容構建輸出在 build/xxx 下面，包含 manifest.json、index.html、對應的 JS/CSS 文件還有圖片等，其中 manifest 中索引了 index.html 來作為點擊插件時的 Popup 的展示頁，這個時候我們就可以使用 Chrome 加載我們構建好的文件，來查看插件運行效果了：
我們打開擴展程序面板，設置開發者模式，然后點擊加載文件，選擇我們的 build 文件地址加載：
Magic ！我們可以在瀏覽器里面看到我們的插件，并使用它了，一個最簡化插件完成！
當然這里我們雖然能夠使用 React/TypeScript 以及一切現代的 Web 開發技術來寫插件，但是目前沒有很好的方式能夠實時的進行開發-查看效果，就是我們常見的 HMR、Live Reload 這種技術暫時還沒有很好的支持到 Chrome 插件的開發，所以每次我們需要查看編寫的效果都需要構建之后點擊插件查看。
當然如果純針對 UI 或者和 Chrome API 無關的邏輯，那么你可以放心的直接在 Web 里面開發，等到開發完畢再構建到 Chrome 插件預覽即可。
我們之前的邏輯是，只要新開一個 Tab，那么就會訪問我們提供的頁面，類似掘金的插件，而且我們也主要到，其實針對 Popup 頁面只是幾個按鈕，而重頭戲都在新 Tab 頁界面展示，也就是我們這里其實需要一個多頁應用？因為最終要生成頁面，一個用在 Popup 頁面展示，一個用在新 Tab 頁展示。
但是我們知道 CRA 腳手架生成的模板是主要用于單頁應用，如果需要切換到多頁應用有一定的成本，但是我們的 Popup 頁面實際上就只有幾個按鈕，所以這里可以做一層簡化，即 Popup 頁面直接手動寫最原始的 HTML/JS/CSS，然后將重頭戲、復雜的新 Tab 頁的邏輯來用 React TypeScript 等現代 Web 技術來開發。
通過這樣設計之后，我們的目錄結構變成了如下形式：
其中 manifest.json 的邏輯變成了如下：
{
"name": "Chrome React SEO Extension",
"description": "The power of React and TypeScript for building interactive Chrome extensions",
"version": "1.0",
"manifest_version": 3,
"action": {
"default_popup": "./popup/index.html",
"default_title": "Open the popup"
},
"chrome_url_overrides": {
"newtab": "index.html"
},
"icons": {
"16": "logo192.png",
"48": "logo192.png",
"128": "logo192.png"
}
}
我們可以看到，點擊 Chrome 插件彈出的頁面 Popup，換成了 ./popup/index.html ，而我們新加了一個 chrome_url_overrides 字段，在 newtab 時，我們打開構建后的 index.html 文件。
通過上面的操作，我們每次打開一個新 Tab，都會展示下面的頁面：
完美！我們已經實現了掘金的插件的核心思想：便捷的獲取技術知識，就在你每次打開 Tab 時。
接下來我們嘗試改造一下我們的 Popup 頁面，同樣是對標掘金，我們知道掘金的 Popup 頁面是一個比較簡單的菜單欄，里面主要是一些用于跳轉到新 Tab 或者設置頁的操作：
我們現在也需要實現類似的點擊某個按鈕，跳轉到我們新 Tab 頁，打開我們上一部分定制的 Tab 邏輯。
這一部分我們就需要修改 popup/index.html ，添加相關的 JS 邏輯如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Fake Juejin Extensions</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<ul>
<li class="open_new_tab">打開新標簽頁</li>
<li class="go_to_github">訪問 Github</li>
<li class="go_to_settings">設置</li>
</ul>
<script src="popup.js"></script>
</body>
</html>
這一次需求我們只會操作打開新標簽頁、訪問 Github，設置我們不做操作，留給讀者自己去擴展。
可以看到我們導入了 popup.js 文件，在這個 JS 文件里，我們需要完成對應打開新標簽頁、和訪問 Github 的邏輯配置：
document.querySelector(".open_new_tab").addEventListener("click", (e)=> {
chrome.tabs.create({}, ()=> {});
});
document.querySelector(".go_to_github").addEventListener("click", (e)=> {
window.open("https://github.com");
});
可以看到，因為 popup.js 是運行在 Chrome 插件的沙箱環境下的，所以它能夠使用到 chrome 這個 API，進行頁面、瀏覽器等相關的操作。
當我們寫入了上述邏輯之后，我們就可以點擊對應的打開新標簽頁，訪問新標簽頁并展示我們上一節說到的內容，訪問 Github，則會跳轉到 Github 頁面。
我們已經開發了新 Tab 頁，開發了 Popup 邏輯，接下來我們可以嘗試一下通過 content 腳本，來實現用戶頁面與插件腳本進行通信，以間接的操作 DOM。
首先我們需要在 manifest.json 里面注冊 content 相關的腳本：
{
"name": "Chrome React Extension",
// ...
"permissions": ["activeTab", "tabs"],
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"js": ["./static/js/content.js"]
}
]
}
上述腳本通過 content_scripts 指定 content 腳本，matches 指定匹配到那些域名時，才執行這個注入腳本的邏輯，js 代表需要注入的腳本的位置，這里我們填寫的為 ./static/js/content.js ，即為通過構建之后產生的 JS 內容地址。
接著我們在 Tab 頁的 React 項目里面去建立與 content 腳本的通信：
import React from "react";
import "./App.css";
import { DOMMessage, DOMMessageResponse } from "./types";
function App() {
// 前置邏輯
React.useEffect(()=> {
/**
* We can't use "chrome.runtime.sendMessage" for sending messages from React.
* For sending messages from React we need to specify which tab to send it to. */ chrome.tabs &&
chrome.tabs.query(
{
active: true,
currentWindow: true,
},
(tabs)=> {
/**
* Sends a single message to the content script(s) in the specified tab,
* with an optional callback to run when a response is sent back.
*
* The runtime.onMessage event is fired in each content script running
* in the specified tab for the current extension. */ chrome.tabs.sendMessage(
tabs[0].id || 0,
{ type: "GET_DOM" } as DOMMessage,
(response: DOMMessageResponse)=> {
setTitle(response.title);
setHeadlines(response.headlines);
}
);
}
);
});
return (
// ... 模板
);
}
export default App;
可以看到我們通過 chome API，去查詢當前正在激活的 Tab 頁，然后給這個 Tab 頁的 content 腳本，通過 chrome.tabs.sendMessage 發了一個 { type: "GET_DOM" } 的消息。
然后我們創建對應的 content 的腳本，在 src/chromeServices 下創建 DOMEvaluator.ts：
import { DOMMessage, DOMMessageResponse } from "../types";
// Function called when a new message is received const messagesFromReactAppListener=(
msg: DOMMessage,
sender: chrome.runtime.MessageSender,
sendResponse: (response: DOMMessageResponse)=> void
)=> {
console.log("[content.js]. Message received", msg);
const headlines=Array.from(document.getElementsByTagName<"h1">("h1")).map(
(h1)=> h1.innerText
);
// Prepare the response object with information about the site const response: DOMMessageResponse={
title: document.title,
headlines,
};
sendResponse(response);
};
/**
* Fired when a message is sent from either an extension process or a content script. */ chrome.runtime.onMessage.addListener(messagesFromReactAppListener);
這個腳本在加載的時候，通過 onMessage.addListener 監聽，然后回調 messagesFromReactAppListener ，在函數里面，可以直接獲取 DOM，查詢這個頁面中的 標題 和所有的 H1 標簽，然后返回。
import React from "react";
import "./App.css";
import { DOMMessage, DOMMessageResponse } from "./types";
function App() {
const [title, setTitle]=React.useState("");
const [headlines, setHeadlines]=React.useState<string[]>([]);
// ...消息通信邏輯
return (
// ... 模板
<div className="App">
<h1>SEO Extension built with React!</h1>
<ul className="SEOForm">
<li className="SEOValidation">
<div className="SEOValidationField">
<span className="SEOValidationFieldTitle">Title</span>
<span
className={`SEOValidationFieldStatus ${
title.length < 30 || title.length > 65 ? "Error" : "Ok"
}`}
>
{title.length} Characters
</span>
</div>
<div className="SEOVAlidationFieldValue">{title}</div>
</li>
<li className="SEOValidation">
<div className="SEOValidationField">
<span className="SEOValidationFieldTitle">Main Heading</span>
<span
className={`SEOValidationFieldStatus ${
headlines.length !==1 ? "Error" : "Ok"
}`}
>
{headlines.length}
</span>
</div>
<div className="SEOVAlidationFieldValue">
<ul>
{headlines.map((headline, index)=> (
<li key={index}>{headline}</li>
))}
</ul>
</div>
</li>
</ul>
</div>
);
}
export default App;
然后擴展一下 CSS 代碼：
.App {
background: #edf0f6;
padding: 0.5rem;
}
.SEOForm {
list-style: none;
margin: 0;
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 10%), 0 1px 2px 0 rgb(0 0 0 / 6%);
background: #fff;
padding: 1rem;
}
.SEOValidation {
margin-bottom: 1.5rem;
}
.SEOValidationField {
width: 100%;
display: flex;
justify-content: space-between;
}
.SEOValidationFieldTitle {
font-size: 1rem;
color: #1a202c;
font-weight: bold;
}
.SEOValidationFieldStatus {
color: #fff;
padding: 0 1rem;
height: 1.5rem;
font-weight: bold;
align-items: center;
display: flex;
border-radius: 9999px;
}
.SEOValidationFieldStatus.Error {
background-color: #f23b3b;
}
.SEOValidationFieldStatus.Ok {
background-color: #48d660;
}
.SEOVAlidationFieldValue {
overflow-wrap: break-word;
width: 100%;
font-size: 1rem;
margin-top: 0.5rem;
color: #4a5568;
}
Nice！我們成功編寫了新 Tab 頁模板、邏輯與樣式，以及創建了 Content 腳本邏輯，最后我們的展示效果如下：
然后我們需要進行代碼構建，因為 content 我們使用 TypeScript 語法寫，將 content 的邏輯構建為單獨的 JS 輸出，我們安裝 craco 依賴，然后修改對應的腳本：
yarn add -D craco
// package.json
"scripts": {
"start": "react-scripts start",
"build": "INLINE_RUNTIME_CHUNK=false craco build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
將 react-scripts 改為 craco 。
然后新建 craco.config.js ，添加如下內容：
module.exports={
webpack: {
configure: (webpackConfig, { env, paths })=> {
return {
...webpackConfig,
entry: {
main: [
env==="development" &&
require.resolve("react-dev-utils/webpackHotDevClient"),
paths.appIndexJs,
].filter(Boolean),
content: "./src/chromeServices/DOMEvaluator.ts",
},
output: {
...webpackConfig.output,
filename: "static/js/[name].js",
},
optimization: {
...webpackConfig.optimization,
runtimeChunk: false,
},
};
},
},
};
準備完畢，開始構建：yarn`` build ，我們會發現構建目錄輸出如下：
在本篇文章中，我們完整體驗了使用 React+TypeScript，開發新 Tab 內容展示頁以及 content 通信腳本，然后通過配置 react-scripts 為 craco 進行了分文件構建，以及直接開發原生的 popup 頁，通過這種融匯的技術，成功開發出了一個類似掘金框架的 Chrome 插件。
這篇文章沒有介紹的有 background 腳本，以及整體插件內容還不夠完善，希望有興趣的讀者可以繼續探索，將其完善。
以上便是本次分享的全部內容，希望對你有所幫助^_^
喜歡的話別忘了 分享、點贊、收藏 三連哦~
歡迎關注公眾號 程序員巴士，來自字節、蝦皮、招銀的三端兄弟，分享編程經驗、技術干貨與職業規劃，助你少走彎路進大廠。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
