Bina Sambungan Chrome Anda Sendiri: Alat Kiraan Word Google Docs

Tutorial ini membimbing anda melalui membuat sambungan krom yang menambah kiraan perkataan yang berterusan kepada Google Docs. Ia meningkatkan pengalaman pengguna Google Docs dengan menyediakan kiraan perkataan yang sentiasa dikemas kini dalam bar status.

Ciri -ciri Utama:

• kiraan perkataan yang berterusan: bar status memaparkan kiraan perkataan dalam masa nyata.
• Pengiraan Komprehensif: dengan tepat mengira kata -kata dalam teks utama, tajuk, kaki, dan nota kaki.
• kiraan aksara: juga menyediakan kiraan aksara, berguna untuk kandungan yang terhad.
• Pemasangan mudah: Ikuti arahan langkah demi langkah untuk membina dan memasang pelanjutan.

Projek ini memerlukan pengetahuan HTML, CSS, dan jQuery. Pastikan anda mempunyai penyemak imbas Chrome terkini dalam mod pemaju (boleh diakses melalui

). Tools > Extensions

Langkah 1: Buat fail manifes (manifest.json)

Fail ini memberitahu Chrome mengenai pelanjutan anda. Buat fail bernama

dengan kandungan berikut: manifest.json

<code class="language-json">{
    "name": "GDWC",
    "version": "0.1",
    "description": "Word count statusbar for Google Docs!",
    "background" : { "scripts": ["background.js"] },
    "page_action" : {
        "default_icon" : "icon.png",
        "default_title" : "GDWC statusbar is active"
    },
    "content_scripts": [
    {
        "matches": ["https://docs.google.com/document/*"],
        "js": ["jq.js", "main.js"],
        "run_at": "document_idle"
    }
    ],
    "icons": {
        "48": "icon48.png",
        "128": "icon128.png"
    }
}</code>

Langkah 2: Skrip latar belakang (latar belakang.js)

Buat

dengan kod ini: background.js

<code class="language-javascript">chrome.extension.onRequest.addListener(
    function(request, sender, sendResponse) {
        chrome.pageAction.show(sender.tab.id);
        sendResponse({});
    }
);</code>

skrip ini menunjukkan ikon lanjutan di bar alamat.

Langkah 3: Bar Status HTML (StatusBar.html)

Buat

: statusbar.html

<code class="language-html"><div id="GDWC_statusBar">
  <a href="https://www.php.cn/link/1c09cec8e3fb5f6dd4fd22a5c644d3e5">GDWC</a>
  <span class="GDWC_statusBarSeparator"></span>
  <span id="GDWC_wordsTotal">Warming up...</span>
</div>
<style>
/* CSS styles for the status bar */
/* ... (same CSS as in original input) ... */
</style></code>

Ini mewujudkan bar status visual. Ingatlah untuk memasukkan CSS dari input asal.

Langkah 4: JavaScript utama (main.js)

Buat

: main.js

<code class="language-javascript">$.get(chrome.extension.getURL("statusbar.html"), {}, function(data) {$('body').append(data);}, 'html');
chrome.extension.sendRequest({}, function(response) {});

$(document).ready(function(){
    countWords();
});

function countWords() {
    var number = 0;
    $('span.kix-lineview-text-block').each(function(i, obj){
        number += $(obj).text().split(/s+/).length;
    });
    $('#GDWC_wordsTotal').text(number + ' total words');
    timeout = setTimeout('countWords()', 5000);
}</code>

Skrip ini menyuntik bar status HTML dan melaksanakan logik pengiraan perkataan. Anda perlu memasukkan

(versi jQuery) dalam projek anda. jq.js

Langkah 5: Pemasangan

Buat ikon yang diperlukan (
1. , icon.png, icon48.png). icon128.png letakkan semua fail dalam folder (mis., "GDWC").
2. di Chrome, pergi ke
, membolehkan mod pemaju, dan klik "Beban Unpacked".
3. Tools > Extensions Pilih folder "GDWC".
Sekarang, buka Google Doc, dan sambungan kiraan perkataan anda harus aktif! Ingat ini adalah versi asas; Pengoptimuman dibincangkan dalam artikel asal. Artikel asal juga menyediakan pautan untuk memuat turun fail jQuery yang diperlukan dan ikon sampel.

Atas ialah kandungan terperinci Bina Sambungan Chrome Anda Sendiri: Alat Kiraan Word Google Docs. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!