Fragmen Teks memungkinkan Anda menentukan cuplikan teks di fragmen URL. Saat menavigasi ke URL dengan fragmen teks seperti itu, browser dapat menekankan dan/atau menarik perhatian pengguna.
ID Fragmen
Chrome 80 adalah rilis besar. Program itu berisi sejumlah fitur yang sangat dinantikan seperti Modul ECMAScript di Web Worker, penggabungan nullish, perantaian opsional, dan lainnya. Rilis tersebut, seperti biasa, yang diumumkan melalui postingan blog di Blog Chromium. Anda dapat melihat kutipan postingan blog tersebut di screenshot di bawah.
Anda mungkin bertanya-tanya arti dari semua kotak merah tersebut. Tabel sementara adalah hasil dari menjalankan
cuplikan berikut di DevTools. Atribut ini menandai semua elemen yang memiliki atribut id
.
document.querySelectorAll('[id]').forEach((el) => {
el.style.border = 'solid 2px red';
});
Saya dapat menempatkan deep link ke elemen
apa pun yang disorot dengan kotak merah berkat
ID fragmen
yang kemudian saya gunakan dalam hash
URL halaman. Dengan asumsi saya ingin menerapkan deep link ke Berikan masukan di
Kotak Forum Produk di
selain itu, saya dapat melakukannya dengan membuat URL
https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1
.
Seperti yang dapat Anda lihat di panel Elemen Developer Tools, elemen yang dimaksud memiliki id
dengan nilai HTML1
.
Jika saya mengurai URL ini dengan konstruktor URL()
JavaScript, komponen yang berbeda akan terungkap.
Perhatikan properti hash
dengan nilai #HTML1
.
new URL('https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1');
/* Creates a new `URL` object
URL {
hash: "#HTML1"
host: "blog.chromium.org"
hostname: "blog.chromium.org"
href: "https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1"
origin: "https://blog.chromium.org"
password: ""
pathname: "/2019/12/chrome-80-content-indexing-es-modules.html"
port: ""
protocol: "https:"
search: ""
searchParams: URLSearchParams {}
username: ""
}
*/
Meskipun saya harus membuka Developer Tools untuk menemukan id
suatu elemen, kita sudah tahu
tentang probabilitas bagian khusus dari laman ini
dimaksudkan untuk ditautkan oleh penulis
postingan blog tersebut.
Bagaimana jika saya ingin menautkan ke sesuatu tanpa id
? Misalnya saya ingin menautkan ke Modul ECMAScript
di judul Web Workers. Seperti yang dapat Anda lihat pada screenshot di bawah, <h1>
yang dimaksud tidak
memiliki atribut id
, artinya saya tidak dapat menautkan ke judul ini. Masalah inilah yang
Fragmen teks terselesaikan.
Fragmen Teks
Proposal Fragmen Teks menambahkan dukungan untuk menentukan cuplikan teks dalam hash URL. Saat menavigasi ke URL dengan fragmen teks tersebut, agen pengguna dapat menekankan dan/atau membuatnya menjadi perhatian pengguna.
Kompatibilitas browser
Untuk alasan keamanan, fitur ini mengharuskan link dibuka di
Konteks noopener
.
Oleh karena itu, pastikan untuk menyertakan
rel="noopener"
di
<a>
markup anchor atau tambahkan
noopener
ke
Daftar Window.open()
fitur fungsionalitas jendela.
start
Dalam bentuknya yang paling sederhana, sintaksis Text Fragment adalah sebagai berikut: Simbol hash #
diikuti dengan
:~:text=
dan terakhir start
, yang mewakili
dienkode dengan persen
teks yang ingin saya tautkan.
#:~:text=start
Misalnya, saya ingin menautkan ke judul Modul ECMAScript di Pekerja Web di postingan blog yang mengumumkan fitur di Chrome 80, URL dalam kasus ini adalah:
Fragmen teks ditekankan seperti ini. Jika Anda mengklik link di browser pendukung seperti Chrome, fragmen teks akan ditandai dan akan men-scroll ke tampilan:
start
dan end
Sekarang bagaimana jika saya ingin menautkan ke seluruh bagian berjudul ECMAScript Modules in Web Workers, bukan hanya {i>heading<i}-nya? Enkode persentase seluruh teks bagian akan menghasilkan URL yang dihasilkan sangat panjang.
Untungnya ada cara yang lebih baik. Daripada seluruh teks, saya dapat membingkai teks yang diinginkan menggunakan tombol
Sintaksis start,end
. Oleh karena itu, saya menentukan beberapa kata yang dienkode dengan persen di awal
dari teks yang diinginkan, dan beberapa kata yang dienkode dengan persen di akhir teks yang diinginkan, dipisahkan
dengan koma ,
.
Tampilannya akan terlihat seperti ini:
Untuk start
, saya memiliki ECMAScript%20Modules%20in%20Web%20Workers
, lalu koma ,
diikuti
oleh ES%20Modules%20in%20Web%20Workers.
sebagai end
. Saat Anda mengklik browser pendukung
seperti Chrome, seluruh bagian akan disorot dan di-scroll hingga terlihat:
Sekarang Anda mungkin bertanya-tanya tentang pilihan start
dan end
saya. Sebenarnya, URL yang sedikit lebih pendek
https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript%20Modules,Web%20Workers.
dengan hanya dua kata di setiap sisi
juga akan bekerja. Bandingkan start
dan end
dengan
nilai sebelumnya.
Jika saya selangkah lebih maju dan sekarang hanya menggunakan satu kata untuk start
dan end
, Anda dapat
melihat bahwa saya
dalam masalah. URL
https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=ECMAScript,Workers.
sekarang bahkan lebih pendek, namun fragmen teks yang disorot
tidak lagi sesuai dengan keinginan Anda. Tujuan
sorotan berhenti pada kemunculan pertama kata Workers.
, yang benar, tetapi bukan yang saya
yang dimaksudkan untuk disoroti. Masalahnya adalah bagian yang diinginkan tidak diidentifikasi secara unik oleh
nilai start
dan end
satu kata saat ini:
prefix-
dan -suffix
Menggunakan nilai yang cukup panjang untuk start
dan end
adalah salah satu solusi untuk mendapatkan link unik.
Namun, dalam beberapa situasi, hal ini tidak mungkin dilakukan. Sebagai catatan, mengapa
saya memilih
Postingan blog rilis Chrome 80 sebagai contoh saya? Jawabannya adalah, dalam Fragmen Teks rilis ini
diperkenalkan:
Perhatikan bagaimana pada screenshot di atas kata "text" muncul empat kali. Kemunculan selanjutnya adalah
ditulis dalam {i>font<i} kode hijau. Jika saya ingin menautkan ke kata tertentu ini, saya akan menyetel start
ke text
. Karena kata "text" adalah, hanya satu kata, tidak mungkin ada end
. Bagaimana sekarang? Tujuan
URL
https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=text
cocok pada kemunculan pertama kata "Text" sudah ada di judul:
Untungnya ada solusi. Dalam kasus seperti ini, saya dapat menentukan prefix-
dan -suffix
. Tujuan
kata sebelum font "text" berwarna hijau adalah "{i>the<i}", dan kata setelahnya adalah "{i>parameter<i}". Tidak satu pun
tiga kemunculan lainnya dari kata "text" memiliki kata-kata di sekitarnya yang sama. Dibekali dengan fitur ini
saya dapat mengubah URL sebelumnya serta menambahkan prefix-
dan -suffix
. Seperti lainnya
parameter, parameter tersebut juga harus dienkode dengan persen dan dapat berisi lebih dari satu kata.
https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=the-,text,-parameter
.
Agar parser dapat mengidentifikasi prefix-
dan -suffix
dengan jelas, keduanya harus dipisahkan
dari start
dan end
opsional dengan tanda hubung -
.
Sintaks lengkap
Sintaks lengkap Text Fragment ditampilkan di bawah ini. (Tanda kurung siku menunjukkan parameter opsional.)
Nilai untuk semua parameter harus dienkode dengan persen. Hal ini sangat penting
untuk tanda hubung
karakter -
, ampersand &
, dan koma ,
, sehingga tidak ditafsirkan sebagai bagian dari teks
direktif.
#:~:text=[prefix-,]start[,end][,-suffix]
Setiap prefix-
, start
, end
, dan -suffix
hanya akan cocok dengan teks dalam satu
elemen level blok,
tetapi rentang start,end
penuh dapat mencakup beberapa blok. Misalnya,
:~:text=The quick,lazy dog
akan gagal dalam contoh berikut, karena awalan
string "Cepat" tidak muncul dalam satu elemen tingkat blok tanpa gangguan:
<div>
The
<div></div>
quick brown fox
</div>
<div>jumped over the lazy dog</div>
Namun, itu cocok dengan contoh berikut:
<div>The quick brown fox</div>
<div>jumped over the lazy dog</div>
Membuat URL Fragmen Teks dengan ekstensi browser
Membuat URL Fragmen Teks secara manual itu melelahkan, terutama dalam hal memastikan bersifat unik. Jika Anda menginginkannya, spesifikasi ini memiliki beberapa tips dan mencantumkan langkah-langkah untuk membuat URL Fragmen Teks. Kami menyediakan ekstensi browser {i> open source<i} yang disebut Link ke Text Fragment yang memungkinkan Anda tautkan ke teks mana pun dengan memilihnya, lalu mengklik "Salin Link ke Teks yang Dipilih" dalam konteks Google Spreadsheet. Ekstensi ini tersedia untuk browser berikut:
- Link ke Text Fragment untuk Google Chrome
- Menautkan ke Text Fragment untuk Microsoft Edge
- Link ke Text Fragment untuk Mozilla Firefox
- Link ke Text Fragment untuk Apple Safari
Beberapa fragmen teks dalam satu URL
Perhatikan bahwa beberapa fragmen teks dapat muncul dalam satu URL. Fragmen teks tertentu harus
dipisahkan dengan karakter ampersand &
. Berikut adalah contoh link dengan tiga fragmen teks:
https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#:~:text=Text%20URL%20Fragments&text=text,-parameter&text=:~:text=On%20islands,%20birds%20can%20contribute%20as%20much%20as%2060%25%20of%20a%20cat's%20diet
Mencampur elemen dan fragmen teks
Fragmen elemen tradisional dapat digabungkan dengan fragmen teks. Tidak masalah memiliki keduanya
di URL yang sama, misalnya, untuk memberikan penggantian yang bermakna jika teks asli di halaman
berubah, sehingga fragmen teks tersebut tidak sesuai lagi. URL
https://blog.chromium.org/2019/12/chrome-80-content-indexing-es-modules.html#HTML1:~:text=Give%20us%20feedback%20in%20our%20Product%20Forums.
menautkan ke Berikan kami masukan di
Bagian Forum Produk
berisi fragmen elemen (HTML1
), serta fragmen teks
(text=Give%20us%20feedback%20in%20our%20Product%20Forums.
):
Perintah fragmen
Ada satu elemen sintaksis yang belum saya jelaskan: perintah fragmen :~:
. Untuk menghindari
masalah kompatibilitas dengan fragmen elemen URL yang ada seperti yang ditunjukkan di atas,
Spesifikasi Fragmen Teks memperkenalkan fragmen
direktif. Perintah fragmen adalah bagian dari fragmen URL yang dibatasi oleh urutan kode
:~:
. Atribut ini disediakan untuk petunjuk agen pengguna, seperti text=
, dan dihapus dari URL
selama pemuatan sehingga skrip penulis tidak
dapat berinteraksi secara langsung dengannya. Petunjuk agen pengguna
juga disebut perintah. Dalam kasus konkret, text=
disebut perintah teks.
Deteksi fitur
Untuk mendeteksi dukungan, uji properti fragmentDirective
hanya baca di document
. Fragmen
adalah mekanisme bagi URL untuk menentukan petunjuk yang diarahkan ke browser, bukan
dokumen. Hal ini dimaksudkan untuk menghindari interaksi langsung dengan
skrip penulis, sehingga agen pengguna di masa depan
petunjuk dapat ditambahkan tanpa takut memasukkan perubahan yang dapat menyebabkan gangguan pada konten yang sudah ada. paket Premium AI
contoh yang potensial dari penambahan di masa mendatang
dapat berupa petunjuk terjemahan.
if ('fragmentDirective' in document) {
// Text Fragments is supported.
}
Deteksi fitur terutama ditujukan untuk kasus ketika link dihasilkan secara dinamis (misalnya dengan mesin telusur) untuk menghindari penyajian link fragmen teks ke browser yang tidak mendukungnya.
Menata gaya fragmen teks
Secara default, browser menata gaya fragmen teks dengan cara yang sama
mark
(biasanya berwarna hitam berlatar kuning,
warna sistem CSS
untuk mark
). Stylesheet agen pengguna berisi CSS yang terlihat seperti ini:
:root::target-text {
color: MarkText;
background: Mark;
}
Seperti yang dapat Anda lihat, browser
mengekspos pemilih pseudo,
::target-text
yang dapat Anda gunakan untuk
dan menyesuaikan penandaan yang diterapkan. Misalnya, Anda dapat mendesain fragmen teks agar menggunakan warna hitam
teks pada latar belakang merah. Seperti biasa, pastikan untuk
memeriksa kontras warna
agar gaya penggantian Anda tidak menyebabkan masalah aksesibilitas dan pastikan penyorotan benar-benar
terlihat menonjol dibandingkan konten lainnya.
:root::target-text {
color: black;
background-color: red;
}
Polifillabilitas
Fitur Text Fragment dapat di-polyfill hingga batas tertentu. Kami menyediakan polyfill, yang digunakan secara internal oleh ekstensi untuk browser yang tidak menyediakan dukungan bawaan untuk Fragmen Teks tempat fungsi diimplementasikan dalam JavaScript.
Pembuatan link Fragmen Teks Terprogram
Polis berisi file
fragment-generation-utils.js
yang dapat Anda impor dan gunakan untuk membuat link Fragmen Teks. Ini adalah
yang diuraikan dalam contoh kode di bawah ini:
const { generateFragment } = await import('https://unpkg.com/text-fragments-polyfill/dist/fragment-generation-utils.js');
const result = generateFragment(window.getSelection());
if (result.status === 0) {
let url = `${location.origin}${location.pathname}${location.search}`;
const fragment = result.fragment;
const prefix = fragment.prefix ?
`${encodeURIComponent(fragment.prefix)}-,` :
'';
const suffix = fragment.suffix ?
`,-${encodeURIComponent(fragment.suffix)}` :
'';
const start = encodeURIComponent(fragment.textStart);
const end = fragment.textEnd ?
`,${encodeURIComponent(fragment.textEnd)}` :
'';
url += `#:~:text=${prefix}${start}${end}${suffix}`;
console.log(url);
}
Mendapatkan Fragmen Teks untuk tujuan analisis
Banyak situs menggunakan fragmen untuk perutean, itulah sebabnya browser menghapus Fragmen Teks agar tidak merusak halaman-halaman tersebut. Terdapat kebutuhan yang diakui mengekspos tautan Fragmen Teks ke laman, misalnya, untuk tujuan analitik, tetapi solusi yang diusulkan belum diterapkan. Sebagai solusi untuk saat ini, Anda dapat menggunakan kode di bawah ini untuk mengekstrak informasi yang diinginkan.
new URL(performance.getEntries().find(({ type }) => type === 'navigate').name).hash;
Keamanan
Perintah fragmen teks hanya dipanggil pada navigasi penuh (yang bukan halaman yang sama) yang merupakan hasil dari
a
aktivasi pengguna.
Selain itu, navigasi yang berasal dari asal yang berbeda dengan tujuan akan memerlukan metode
navigasi situs web ini
untuk dilakukan di
noopener
, seperti
bahwa laman tujuan diketahui
cukup terisolasi. Perintah fragmen teks hanya
diterapkan ke {i>frame<i} utama. Artinya, teks tidak akan ditelusuri di dalam iframe dan iframe
navigasi tidak akan memanggil fragmen teks.
Privasi
Implementasi spesifikasi Fragmen Teks tidak
harus membocorkan apakah teks
apakah fragmen ditemukan di halaman atau tidak. Sementara fragmen elemen sepenuhnya berada di bawah kendali
penulis halaman asli, fragmen teks dapat dibuat oleh siapa saja. Ingat bagaimana dalam contoh saya di atas
tidak ada cara untuk menautkan ke heading ECMAScript Modules in Web Workers, karena <h1>
melakukan
tidak memiliki id
, tetapi bagaimana siapa pun, termasuk saya, dapat menautkan ke mana saja dengan membuat
fragmen teksnya?
Misalkan saya menjalankan jaringan iklan jahat evil-ads.example.com
. Bayangkan lebih lanjut bahwa dalam salah satu
iframe Saya membuat iframe lintas origin tersembunyi ke dating.example.com
dengan Teks secara dinamis
URL fragmen
dating.example.com#:~:text=Log%20Out
setelah pengguna berinteraksi dengan iklan. Jika teks "Logout" ditemukan, saya tahu korban saat ini
login ke dating.example.com
, yang dapat saya gunakan untuk profiling pengguna. Karena Teks yang naif
Implementasi Fragment mungkin memutuskan bahwa pencocokan yang berhasil harus menyebabkan pengalihan fokus, di
evil-ads.example.com
Saya dapat memproses peristiwa blur
dan mengetahui saat terjadi kecocokan. Di beberapa
Chrome, kami telah mengimplementasikan Fragmen Teks sedemikian rupa sehingga skenario di atas tidak dapat terjadi.
Serangan lainnya mungkin mengeksploitasi lalu lintas jaringan berdasarkan posisi scroll. Menganggap saya memiliki akses ke
log lalu lintas jaringan korban saya, seperti admin intranet perusahaan. Sekarang bayangkan di sana
sudah ada dokumen panjang tentang Apa yang Harus Dilakukan Jika Anda Menderita... dan kemudian daftar
kondisi seperti kejenuhan, kecemasan, dll. Saya dapat menempatkan piksel pelacakan di samping setiap item pada
daftar. Jika saya kemudian menentukan bahwa pemuatan dokumen secara temporer terjadi bersamaan dengan
piksel pelacakan di sebelah item burnout, saya dapat, sebagai admin intranet, menentukan
seorang karyawan telah mengklik link fragmen teks dengan :~:text=burn%20out
yang
mungkin Anda anggap rahasia
dan tidak dapat dilihat oleh siapa pun. Karena contoh ini agak
dibuat dan karena eksploitasinya memerlukan persyaratan yang sangat spesifik,
Tim keamanan Chrome mengevaluasi risiko penerapan scroll pada navigasi agar dapat dikelola.
Agen pengguna lain mungkin memutuskan untuk menampilkan elemen UI scroll manual.
Untuk situs yang ingin menonaktifkan fitur ini, Chromium mendukung Kebijakan Dokumen nilai header yang dapat mereka kirimkan sehingga agen pengguna tidak akan memproses URL Fragmen Teks.
Document-Policy: force-load-at-top
Menonaktifkan fragmen teks
Cara termudah untuk menonaktifkan fitur ini adalah dengan menggunakan ekstensi yang dapat memasukkan respons HTTP {i>header<i}, misalnya, ModHeader (bukan produk Google), untuk menyisipkan header respons (bukan permintaan) sebagai berikut:
Document-Policy: force-load-at-top
Cara lain yang lebih terlibat untuk memilih tidak ikut serta adalah dengan menggunakan setelan perusahaan
ScrollToTextFragmentEnabled
Untuk melakukannya di macOS, tempel perintah di bawah ini di terminal.
defaults write com.google.Chrome ScrollToTextFragmentEnabled -bool false
Di Windows, ikuti dokumentasi tentang Dukungan Bantuan Google Chrome Enterprise situs Anda.
Fragmen teks di penelusuran web
Untuk beberapa penelusuran, mesin telusur Google memberikan jawaban atau ringkasan cepat dengan konten cuplikan dari situs yang relevan. Cuplikan pilihan ini kemungkinan besar muncul saat penelusuran dalam bentuk pertanyaan. Mengklik cuplikan pilihan akan mengarahkan pengguna langsung ke konten unggulan pada halaman web sumber. Hal ini berfungsi berkat URL Fragment Teks yang dibuat secara otomatis.
Kesimpulan
URL Fragmen Teks adalah fitur canggih untuk menautkan ke teks acak di halaman web. Para ilmuwan komunitas dapat menggunakannya untuk memberikan link kutipan atau referensi yang sangat akurat. Mesin telusur dapat menggunakan menjadi deeplink ke teks hasil pada halaman. Situs jejaring sosial dapat menggunakannya untuk memungkinkan pengguna berbagi bagian tertentu dari laman web, bukan screenshot yang tidak dapat diakses. Saya harap Anda mulai menggunakan URL Fragmen Teks dan merasakan manfaatnya seperti yang saya rasakan. Pastikan untuk menginstal browser Link ke Text Fragment .
Link terkait
- Draf spesifikasi
- Peninjauan TAG
- Entri Status Platform Chrome
- Bug pelacakan Chrome
- Rencana untuk Mengirimkan rangkaian pesan
- Thread WebKit-Dev
- Thread posisi standar Mozilla
Ucapan terima kasih
Text Fragment diimplementasikan dan ditentukan oleh Nick Burris dan David Bokan, dengan kontribusi dari Berikan Wang. Terima kasih kepada Joe Medley atas tinjauan menyeluruh dari artikel ini. Banner besar oleh Greg Rakozy di Buka pembuka.