Khi tôi bắt đầu làm biên tập viên JavaScript tại SitePoint, quá trình gửi bài của chúng tôi rất lộn xộn - các bài báo đến từ mọi hướng với nhiều định dạng khác nhau. Vì vậy, chúng tôi quyết định chuẩn hóa mọi thứ và giải quyết việc gửi thông qua GitHub trong Markdown.
Đây là một bước tiến, nhưng chúng tôi vẫn cần chuyển đổi Markdown thành HTML cho giao diện người dùng WordPress của mình. Các quyền hạn tại SitePoint HQ vào thời điểm đó đã phủ quyết việc cài đặt bất kỳ plugin WordPress nào, điều này khiến chúng tôi phải cân nhắc xem liệu chúng tôi có thể hoàn thành nhiệm vụ này với tiện ích mở rộng trình duyệt hay không. May mắn thay, chúng tôi có thể!
Trong bài đăng sau, tôi sẽ trình bày cách bạn có thể tạo tiện ích mở rộng Chrome của riêng mình để thêm chức năng bổ sung cho WordPress. Tôi cũng sẽ giới thiệu bạn với SP-Công cụ, tiện ích mở rộng chúng tôi sử dụng tại SitePoint để làm cho cuộc sống như một trình chỉnh sửa dễ dàng hơn một chút.
Giải phẫu của tiện ích mở rộng Chrome
Bất chấp những gì bạn có thể nghĩ, việc tạo một tiện ích mở rộng Chrome không khó. Hãy bắt đầu bằng cách xem xét các thành phần khác nhau.
Các phần của phần sau được mượn từ một hướng dẫn khác mà tôi đã viết về xây dựng tiện ích mở rộng Chrome bằng Vue.js.
Phần cốt lõi của bất kỳ tiện ích mở rộng Chrome nào là tệp kê khai. Đây là định dạng JSON và cung cấp thông tin quan trọng về tiện ích mở rộng, chẳng hạn như phiên bản, tài nguyên hoặc các quyền mà tiện ích mở rộng yêu cầu.
Tệp kê khai sẽ không tự làm được nhiều việc, vì vậy chúng tôi có thể sử dụng kịch bản nội dung để thêm một số chức năng. Tập lệnh nội dung là các tệp “chạy trong ngữ cảnh của các trang web”. Có nghĩa là, bạn chỉ định URL trong tệp kê khai của mình, sau đó khi trình duyệt của bạn truy cập một trang có địa chỉ khớp với URL bạn đã chỉ định, tập lệnh nội dung sẽ được đưa vào trang và chạy.
Để chứng minh những khái niệm này, hãy bắt đầu bằng cách viết một tiện ích mở rộng của Chrome để thực hiện điều gì đó trên trang web chính của SitePoint.
Tạo một thư mục mới có tên my-extension
và hai tệp, manifest.json
và main.js
:
mkdir my-extension
cd my-extension
touch manifest.json main.js
Mở ra manifest.json
và thêm mã sau:
{ "name": "My Extension", "version": "0.0.1", "manifest_version": 2, "content_scripts": [ { "matches": [ "*://*.sitepoint.com/*" ], "js": [ "main.js" ] } ]
}
Sản phẩm name
, version
và manifest_version
là tất cả các trường bắt buộc. Các name
và version
các lĩnh vực có thể là bất cứ điều gì bạn muốn; các phiên bản kê khai nên được đặt thành 2 (kể từ Chrome 18).
Sản phẩm content_scripts
khóa cho phép chúng tôi đăng ký một kịch bản nội dung (main.js
), sẽ được chạy bất cứ khi nào chúng tôi truy cập SitePoint. Lưu ý cách chúng ta có thể sử dụng phù hợp với các mẫu để chỉ định các phần của URL, chẳng hạn như giao thức.
Bây giờ, hãy thêm đoạn mã sau vào main.js
để làm cho trình duyệt nói lời chào bất cứ khi nào chúng tôi truy cập SitePoint:
alert('Hello there!');
Cuối cùng, hãy cài đặt tiện ích mở rộng. Mở Chrome và nhập chrome://extensions/
trong thanh địa chỉ. Bạn sẽ thấy một trang hiển thị các tiện ích mở rộng mà bạn đã cài đặt.
Khi chúng tôi muốn cài đặt tiện ích mở rộng của mình từ một tệp (chứ không phải Cửa hàng Chrome trực tuyến), chúng tôi cần kích hoạt Chế độ nhà phát triển sử dụng nút chuyển đổi ở góc trên cùng bên phải của trang. Thao tác này sẽ thêm một thanh menu bổ sung với tùy chọn Tải giải nén. Nhấp vào nút này và chọn my-extension
thư mục bạn đã tạo trước đó. Nhấp chuột Mở và phần mở rộng sẽ được cài đặt.
Bây giờ khi bạn truy cập SitePoint, điều này sẽ xảy ra:
Xin chúc mừng! Bạn vừa tạo một tiện ích mở rộng của Chrome.
Tập lệnh nền và chuyển thông báo
Vì vậy, hộp thoại đó khá khó chịu phải không? Để kết thúc phần này, hãy thêm một mục menu ngữ cảnh để kích hoạt nó theo cách thủ công, thay vì để nó xuất hiện trên mỗi lần tải trang.
Điều này giới thiệu cho chúng ta một thành phần quan trọng khác của tiện ích mở rộng Chrome - kịch bản nền. Các tập lệnh này có thể phản ứng với các sự kiện của trình duyệt (chẳng hạn như người dùng nhấp vào mục nhập menu ngữ cảnh) và họ có toàn quyền truy cập vào các API của Chrome. Tuy nhiên, họ không có quyền truy cập vào trang hiện tại và dựa vào việc truyền thông điệp để giao tiếp với các tập lệnh nội dung.
Cập nhật tệp kê khai như sau:
{ "name": "My Extension", "version": "0.0.1", "manifest_version": 2, "permissions": [ "contextMenus" ], "content_scripts": [ { "matches": [ "*://*.sitepoint.com/*" ], "js": [ "main.js" ] } ], "background": { "scripts": ["background.js"], "persistent": false }
}
Lưu ý rằng chúng tôi đang yêu cầu contextMenus
quyền, vì chúng tôi muốn thêm thứ gì đó vào menu ngữ cảnh và chúng tôi đã đăng ký một tập lệnh nền không liên tục. Làm cho tập lệnh nền không liên tục cho phép nó được dỡ bỏ khi không cần thiết.
Tiếp theo, tạo một background.js
tệp và thêm:
chrome.runtime.onInstalled.addListener(() => { chrome.contextMenus.create({ id: 'greet', title: 'Say hi', contexts: ['page'], documentUrlPatterns: ['*://*.sitepoint.com/*'], });
}); chrome.contextMenus.onClicked.addListener((info, tab) => { if (info.menuItemId === 'greet') { chrome.tabs.sendMessage(tab.id, { text: 'greet' }, (res) => { console.log(res); }); }
});
Chúng tôi đăng ký mục nhập menu ngữ cảnh khi tiện ích mở rộng được cài đặt, sau đó thêm trình xử lý sự kiện để gửi thông báo đến tập lệnh nội dung của chúng tôi bất cứ khi nào mục nhập được nhấp vào.
Thay đổi main.js
như vậy:
chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => { if (msg.text === 'greet') { alert('hi'); sendResponse('I greeted the user'); }
});
Ở đây, chúng tôi lắng nghe thông điệp từ tập lệnh nền của chúng tôi. Nếu nó có nội dung "chào", thì chúng tôi sẽ tắt cảnh báo và gửi lại một tin nhắn thông báo cho kịch bản nền rằng chúng tôi đã làm những gì được yêu cầu.
Để thử điều này, hãy quay lại trang tiện ích mở rộng (tại chrome://extensions/
), sau đó bấm vào biểu tượng tải lại và tải lại bất kỳ trang SitePoint nào. Khi bạn nhấp chuột phải, bây giờ bạn sẽ thấy một mục menu ngữ cảnh.
Nâng cao chức năng của WordPress với Tiện ích mở rộng của Chrome
Bây giờ chúng ta đã tự làm quen với các thành phần cơ bản của tiện ích mở rộng Chrome, hãy xem cách chúng ta có thể thực hiện một số bổ sung cho chức năng của WordPress.
Để làm theo phần này, bạn sẽ cần cài đặt làm việc của WordPress. Tôi đã cài đặt cục bộ của tôi. Nó đang chạy trên máy chủ Apache tại http://localhost/wp
.
Mã cho tiện ích mở rộng này có thể được tìm thấy trên GitHub.
Thêm một công cụ chuyển đổi Markdown
Hãy bắt đầu bằng cách thêm công cụ chuyển đổi Markdown vào trình chỉnh sửa WordPress. Đúng như trải nghiệm trên SitePoint, tôi sẽ sử dụng trình chỉnh sửa “cổ điển” (đạt được bằng cách cài đặt Tắt plugin Gutenberg) Và bản văn lượt xem.
Để bắt đầu, hãy tạo cấu trúc thư mục sau cho tiện ích mở rộng mới của chúng tôi:
wp-enhance
├── lib
│ ├── jquery.min.js
│ └── showdown.min.js
├── manifest.json
└── scripts └── main.js
Trên dòng lệnh:
mkdir wp-enhance
cd wp-enhance
mkdir lib scripts
touch lib/showdown.min.js lib/jquery.min.js
touch scripts/main.js
touch manifest.json
Như bạn có thể thấy, chúng tôi sẽ sử dụng Trình chuyển đổi đánh dấu xuống và jQuery (vì tôi lười).
Yêu cầu đầu tiên của công việc là lấy phiên bản rút gọn mới nhất của các thư viện này (Showdown và jQuery) và thêm nội dung vào các tệp thích hợp.
Tiếp theo, thêm mã sau vào manifest.json
:
{ "manifest_version": 2, "name": "WP Enhance", "description": "A Chrome extension to enhance WordPress' functionality", "version": "0.0.1", "content_scripts": [ { "matches": [ "http://localhost/wp/wp-admin/post-new.php" ], "js": [ "lib/jquery.min.js", "lib/showdown.min.js", "scripts/main.js" ] } ]
}
Không có gì ngoạn mục xảy ra ở đây. Tiện ích mở rộng được đặt để chạy khi chúng tôi truy cập http://localhost/wp/wp-admin/post-new.php
và chúng tôi đang bao gồm hai thư viện mà chúng tôi vừa tải xuống.
Cuối cùng, trong scripts/main
thêm những điều sau:
'use strict'; const $editorToolbar = $('#ed_toolbar');
const $mainTextArea = $('#content'); function getShowdownConverter() { const converter = new showdown.Converter(); // Set any options here, for example to add table support converter.setOption('tables', true); return converter;
} function addMDButton() { const mdConverter = getShowdownConverter(); const $convertButton = $('<input />', { type: 'button', value: 'MD', class: 'ed_button button button-small', title: 'Convert MD to HTML', click() { const md = $mainTextArea.val(); const html = mdConverter.makeHtml(md); $mainTextArea.val(html); }, }); $editorToolbar.append($convertButton);
} addMDButton();
Ở đây, chúng tôi đang tạo một nút mới và gắn nó vào thanh công cụ của trình chỉnh sửa WordPress. Khi nó được nhấp vào, chúng tôi đang gọi Showdown's makeHtml
phương pháp mà chúng tôi chuyển nội dung của vùng nội dung. Điều này trả về cho chúng tôi một số HTML, sau đó chúng tôi sẽ chèn lại vào trình chỉnh sửa.
Tải tiện ích mở rộng và truy cập trang đăng mới. Bạn sẽ thấy một cái gì đó như thế này:
Tôi chắc rằng bạn sẽ đồng ý, đó là một kết quả khá ấn tượng chỉ trong vài dòng mã.
Thêm Bộ chọn Ngày vào Tiện ích Xuất bản
Tiếp theo, chúng tôi sẽ cải tiến tiện ích xuất bản với công cụ chọn ngày. Điều này sẽ thay thế một loạt các hộp thả xuống và hộp nhập mà bạn thường thấy khi nhấp vào Chỉnh sửa liên kết bên cạnh thông báo “Xuất bản ngay lập tức” trong WordPress ' Xuất bản phụ tùng.
Điều đầu tiên chúng ta cần làm là tải xuống bộ chọn ngày. Đối với bản demo này, tôi sẽ sử dụng này. Bạn có thể tải xuống các tệp cần thiết từ Ở đây. Giải nén tệp đó và đặt build/jquery.datetimepicker.full.min.js
vào của chúng tôi lib
thư mục. Sau đó, tạo một css
thư mục trong phần mở rộng và vị trí build/jquery.datetimepicker.min.css
vào đó.
Tiện ích mở rộng của chúng tôi bây giờ sẽ trông như thế này:
wp-enhance
├── css
│ └── jquery.datetimepicker.min.css
├── lib
│ ├── jquery.datetimepicker.full.min.js
│ ├── jquery.min.js
│ └── showdown.min.js
├── manifest.json
└── scripts └── main.js
Bây giờ bao gồm các tệp này trong tệp kê khai:
{ "manifest_version": 2, "name": "WP Enhance", "description": "A Chrome extension to enhance WordPress' functionality", "version": "0.0.1", "content_scripts": [ { "matches": [ "http://localhost/wp/wp-admin/post-new.php" ], "js": [ "lib/jquery.min.js", "lib/showdown.min.js", "lib/jquery.datetimepicker.full.min.js", "scripts/main.js" ], "css": [ "css/jquery.datetimepicker.min.css" ] } ]
}
Cuối cùng, chúng ta cần thay đổi kịch bản nội dung của mình (main.js
) để trông như thế này:
const $editorToolbar = $('#ed_toolbar');
const $mainTextArea = $('#content');
const $timeStampDiv = $('#timestampdiv');
const $wpSchedulePostDropdown = $('.timestamp-wrap');
let $datepicker; const $dd = $('#jj');
const $mm = $('#mm');
const $yyyy = $('#aa');
const $hh = $('#hh');
const $mn = $('#mn'); function getShowdownConverter() { ... } function addMDButton() { ... } function addDatePicker() { $datepicker = $('<input />', { id: 'bandaid-datepicker', type: 'text', placeholder: 'Date and time', }); $datepicker.datetimepicker(); $timeStampDiv.prepend($datepicker);
} addMDButton(); $wpSchedulePostDropdown.hide();
addDatePicker(); $datepicker.on('change', function updateDateFields() { // String in format yyyy/mm/dd hh:mm const dateString = this.value; $yyyy.val(dateString.substr(0, 4)); $mm.val(dateString.substr(5, 2)); $dd.val(dateString.substr(8, 2)); $hh.val(dateString.substr(11, 2)); $mn.val(dateString.substr(14, 2));
});
Những gì chúng tôi đang làm là tham chiếu đến các yếu tố đầu vào mà WP sử dụng để quản lý thời gian và ngày của bài đăng đã lên lịch. Sau đó, chúng tôi đang ẩn các phần tử này và khởi tạo trình chọn ngày. Bất cứ khi nào người dùng chọn một ngày, trường ẩn sẽ được cập nhật và bài đăng có thể được lên lịch.
Tải lại tiện ích mở rộng, sau đó làm mới trang bài đăng mới của WordPress. Những gì bạn có bây giờ sẽ trông như thế này:
Một lần nữa, một kết quả ấn tượng cho không nhiều mã.
Kiểm tra phần mở rộng
Một trong những điều tôi nhận thấy sớm với tiện ích mở rộng SP-Tools của chúng tôi là khi WordPress được cập nhật, mọi thứ sẽ hỏng. Vì vậy, tôi phải nghĩ cách tôi có thể kiểm tra tiện ích mở rộng và quyết định rằng một số thử nghiệm đầu cuối với Nightwatch sẽ có ý nghĩa
Trong phần sau, tôi sẽ trình bày cách chúng tôi có thể kiểm tra tiện ích mở rộng của mình theo cách tương tự.
Trước tiên, chúng tôi cần tạo package.json
tập tin. Trong thư mục gốc, chạy npm init -y
. Tiếp theo, hãy cài đặt Nightwatch và ChromeDriver dưới dạng phụ thuộc của nhà phát triển:
npm install --save-dev nightwatch chromedriver
Bây giờ làm một test
thư mục và thêm một nightwatch.config.js
tệp, cũng như một wp.js
tệp cho mã thử nghiệm của chúng tôi:
mkdir test
touch test/nightwatch.config.js test/wp.js
Thêm phần sau vào tệp cấu hình:
module.exports = { src_folders: 'test', output_folder: 'test', page_objects_path: '', custom_commands_path: '', custom_assertions_path: '', webdriver: { start_process: true, port: 9515, server_path: 'node_modules/.bin/chromedriver', log_path: false, cli_args: [], }, test_settings: { default: { desiredCapabilities: { browserName: 'chrome', chromeOptions: { args: [ 'load-extension=./', '--test-type', ], }, }, }, },
};
Phần quan trọng là 'load-extension=./',
, yêu cầu Nightwatch tải tiện ích mở rộng của chúng tôi vào trình duyệt thử nghiệm.
Và thêm phần sau vào wp.js
(thay thế thông tin đăng nhập của tôi bằng thông tin đăng nhập của bạn):
module.exports = { 'Test WordPress Mods': (browser) => { browser // Login to WP Dashboard .url('http://localhost/wp/wp-login.php') .setValue('#user_login', 'jim') .setValue('#user_pass', 'secret') .click('#wp-submit') // Go to New Post Page .url('http://localhost/wp/wp-admin/post-new.php') // Test MD > HTML conversion .setValue('#content', '## level 2 headingn### level 3 heading') .click('input[value="MD"]') .assert.valueContains('#content', '<h2 id="level2heading">level 2 heading</h2>') .assert.valueContains('#content', '<h3 id="level3heading">level 3 heading</h3>') // This is here so that you can take a look at the browser .pause(5000) .end(); },
};
Bây giờ hãy chạy các bài kiểm tra bằng cách sử dụng:
node_modules/.bin/nightwatch --config test/nightwatch.config.js
Bạn sẽ thấy một phiên bản của trình duyệt Chrome mở và Nightwatch thực hiện các thử nghiệm mà chúng tôi đã chỉ định. Kết quả của các bài kiểm tra được xuất ra thiết bị đầu cuối.
Hy vọng rằng DSL của Nightwatch khá tự giải thích. Bạn có thể đọc thêm về nó trong tài liệu hướng dẫn. Nếu bạn yêu thích một thử thách, hãy thử thêm các bài kiểm tra cho trình chọn ngày.
Lưu ý rằng tôi đã mã hóa cứng thông tin đăng nhập của mình ở đây. Nếu bạn sử dụng tệp này cho bất kỳ mục đích nào khác ngoài mục đích trình diễn, bạn nên chuyển chúng sang tệp cấu hình không được cam kết với GitHub.
Và đừng quên bạn có thể tìm thấy mã cho mọi thứ tôi đã chứng minh cho đến nay GitHub.
Các tính năng đáng chú ý của Tiện ích mở rộng Chrome của SitePoint
Như tôi chắc rằng bạn đã nhận ra, quãng đường của bạn sẽ khác nhau về mức độ hữu ích của bạn khi bạn tìm thấy tiện ích mở rộng trình duyệt như vậy. Hầu hết mọi người sẽ có (một chút) nhu cầu khác nhau và sẽ có thể cài đặt các plugin WordPress để giải quyết hầu hết các vấn đề mà họ gặp phải.
Tuy nhiên, trong phần cuối cùng này, tôi muốn phác thảo một số tính năng mà chúng tôi đã thêm vào Phần mở rộng SP-Tools với hy vọng rằng chúng có thể truyền cảm hứng hoặc thậm chí hữu ích cho người khác.
- A Viết hoa và kiểm tra cái nút. Điều này chuyển đổi tiêu đề bài đăng thành trường hợp tiêu đề.
- Một công cụ phân tích dòng tiêu đề, cung cấp cho bạn điểm 100 cho tiêu đề của bạn và đưa ra các đề xuất cải tiến.
- A Viết hoa các tiêu đề phụ nút này kiểm tra các tiêu đề còn lại trong bài viết để viết hoa tiêu đề.
- A Sao chép Liên kết nút này sao chép liên kết cố định hiện tại của bài đăng vào khay nhớ tạm.
- A Xây dựng lại liên kết , tạo lại liên kết cố định của bài đăng. Điều này rất hữu ích, chẳng hạn, khi WordPress tạo một liên kết cố định dựa trên một tiêu đề nháp mà sau đó sẽ thay đổi.
- Có thể mở rộng bảo vệ molly, thực hiện một số kiểm tra và tắt / bật nút xuất bản tương ứng. Trong số những thứ khác, nó kiểm tra:
- một liên kết cố định bài viết hợp lý
- sự hiện diện của các URL tương đối trong ngăn trình chỉnh sửa
- sự hiện diện của các liên kết trống trong ngăn trình chỉnh sửa
- sự hiện diện của
<h1>
thẻ trong ngăn trình chỉnh sửa - sự hiện diện của
[special]
thẻ shortcode trong đoạn trích
- A Sao chép Thẻ , cung cấp cho bạn danh sách các thẻ được phân tách bằng dấu phẩy được sao chép vào khay nhớ tạm.
- A rel = ”được tài trợ” nút chuyển đổi
rel
thuộc tính của tất cả các liên kết trong một bài đăngsponsored
.
Nếu bạn muốn kiểm tra nó, bạn có thể tìm tiện ích mở rộng của chúng tôi trên GitHub. Có một số tiện ích khác trong đó, chẳng hạn như các mục menu ngữ cảnh, một số mã để tắt cuộn vô hạn trên trang web chính của chúng tôi và tất nhiên, các thử nghiệm với Nightwatch.
Kết luận
Trong hướng dẫn này, chúng tôi đã xem xét các thành phần khác nhau tạo nên tiện ích mở rộng của Chrome. Tôi đã chứng minh cách chúng tôi có thể xây dựng và thử nghiệm tiện ích mở rộng Chrome của riêng mình để nâng cao chức năng cơ bản của cài đặt WordPress. Tôi cũng đã giới thiệu với bạn về SP-Tools, tiện ích mở rộng Chrome của riêng SitePoint, mà chúng tôi sử dụng để thực hiện các tác vụ chỉnh sửa khác nhau dễ dàng hơn.
Nếu bạn thấy tiện ích mở rộng của chúng tôi hữu ích hoặc điều chỉnh nó để làm bất cứ điều gì khác, tôi rất muốn nghe ý kiến của bạn trên Twitter.
Nguồn: https://www.sitepoint.com/build-a-chrome-extension/?utm_source=rss