ContentSetting：掌控网页内容展示规则

引言：

在 Chrome 扩展开发中，ContentSetting 功能犹如一把钥匙，能够让开发者深度干预浏览器的内容展示设置。它可以对诸如 JavaScript 执行权限、图片加载、弹窗显示、插件使用等多种网页元素的设置进行精细调控。无论是打造一个专注于提升浏览安全性的扩展，还是开发增强特定网页功能体验的工具，ContentSetting 都提供了强大的底层支持，使我们能够根据用户需求和应用场景，灵活地定制网页内容在浏览器中的呈现方式，从而为用户带来更加个性化、安全且高效的浏览体验。

当禁止图片时页面无法加载图片。

Manifest

在启用 Chrome Extension ContentSetting 功能之前，需要在 manifest 文件中进行相应的权限声明与配置。

js 复制代码

{
  "name": "Content settings",
  "version": "0.3",
  "description": "Uses chrome.contentSettings to display the settings of a given page in the extension's popup.",
  "permissions": ["contentSettings", "activeTab"],
  "action": {
    "default_icon": "contentSettings.png",
    "default_popup": "popup.html"
  },
  "manifest_version": 3
}

查询内容设置

查询内容设置是了解当前浏览器页面各种元素设置状态的重要手段。使用chrome.contentSettings.get 方法可以实现这一操作。该方法接受一个包含筛选条件的对象作为参数，例如可以指定要查询的内容类型（如 javascript、images 等）以及作用范围（特定网站或全局）。

API

chrome.contentSettings.get(params, callable)

示例

js 复制代码

document.addEventListener('DOMContentLoaded', function () {
  chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
    let current = tabs[0];
    incognito = current.incognito;
    url = current.url;
    let types = [
      'cookies',
      'images',
      'javascript',
      'location',
      'popups',
      'notifications',
      'microphone',
      'camera',
      'automaticDownloads'
    ];
    types.forEach(function (type) {
      // HACK: [type] is not recognised by the docserver's sample crawler, so
      // mention an explicit
      // type: chrome.contentSettings.cookies.get - See http://crbug.com/299634
      chrome.contentSettings[type] &&
        chrome.contentSettings[type].get(
          {
            primaryUrl: url,
            incognito: incognito
          },
          function (details) {
            document.getElementById(type).disabled = false;
            document.getElementById(type).value = details.setting;
          }
        );
    });
  });

  let selects = document.querySelectorAll('select');
  for (let i = 0; i < selects.length; i++) {
    selects[i].addEventListener('change', settingChanged);
  }
});

新增内容设置规则

新增内容设置规则能够让我们为特定的网页元素或网站定制个性化的展示规则。通过 chrome.contentSettings.set 方法来实现。

API

chrome.contentSettings.set(params)

示例

js 复制代码

function settingChanged() {
  let type = this.id;
  let setting = this.value;
  let pattern = /^file:/.test(url) ? url : url.replace(/\/[^/]*?$/, '/*');
  console.log(type + ' setting for ' + pattern + ': ' + setting);
  chrome.contentSettings[type].set({
    primaryPattern: pattern,
    setting: setting,
    scope: incognito ? 'incognito_session_only' : 'regular'
  });
}

引用

github.com/GoogleChrom...